1

これを機能させる方法を理解しようとしていますが、わかりません...

複数の親 div (ドロップ可能) と複数の子 div (ドラッグ可能) があります。

子 div にはフォームが含まれており、フォームには多くの入力タグが含まれています。

すべての入力要素が必要であり、ユーザーに値を入力してもらいたい。それらが空で、ユーザーが値を入力せず、ユーザーがそれらのいずれかを親 div 内にドラッグした場合、子 div を検証する必要があります。検証が失敗した場合は、子 div をその場所に戻します。

$( ".parent" ).droppable({
        accept: ".child",
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
    tolerance:'pointer',
        drop: function( event, ui ) {
//validate and then reject if it fails???
            $( this )
                .addClass( "ui-state-highlight" )
                .find( "p" )
                .append(ui.draggable).animate({width:'100',height:'100'});
        }
    });

$( ".child" ).draggable();​

この例を実装する方法がわかりません:

http://jsfiddle.net/Dyawa/7/

子の名前が空の場合、子 div を元の位置に戻すことは可能ですか?

4

1 に答える 1

0

この質問を参照してください:条件に基づいてドラッグ可能な jquery UI の位置を元に戻す方法

いくつかのルールが満たされていない場合は、ドラッグ可能な div を元に戻すように JQuery に指示する必要があります。

$(".child").draggable({ revert: 'invalid' });

次に、 .droppable() で、acceptオプションを使用してドロップに有効なものを設定します。次に例を示します。

$(".parent").droppable({ 
    accept: function(dropElem) {
      //dropElem was the dropped element, return true or false to accept/refuse it
      return ($(dropElem).hasClass("child") && $("input",dropElem).val().length > 0);
    },
    activeClass: "ui-state-hover",
    hoverClass: "ui-state-active",
    tolerance:'pointer',
    drop: function( event, ui ) {
        $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .append(ui.draggable).animate({width:'100',height:'100'});
    }
});
于 2012-12-04T22:39:37.453 に答える