6

写真のリストがあり、ドラッグ可能に追加しましたが、写真を親divの外にドラッグすると、クラスを変更して、ドロップすると削除されることを示します。ユーザーがそれをドロップし、関数を起動させたい。（親divの外にある場合のみ）

<ul class="photos">
<li><img src=""/></li>
<li><img src=""/></li>
</ul>

したがって、liが.photosの外にドラッグされると、クラスを追加するために起動し、liがその外にドロップされると、起動してイベントを削除します。

4

1 に答える 1

10

言及した親divがドロップ可能であると仮定すると、イベントハンドラーをイベントにバインドできますdropout。

$("#parentDiv").on("dropout", function(event, ui) {
    //ui.draggable refers to the draggable
});

受け入れられたドラッグ可能オブジェクトがドロップ可能オブジェクトの許容範囲外にドラッグされるたびに、イベントが発生します。

更新（コメントを参照）

オプションにコールバック関数を指定revertできます。この関数は、ドラッグ可能オブジェクトがドロップされたドロップ可能オブジェクトを含む、またはfalse（無効な場所にドロップされた場合）次のいずれかの引数を取ることができます。

$("#draggable").draggable({
    revert: function(valid) {
        if(!valid) {
            //Dropped outside of valid droppable
        }
    }
});

これが実際の例です。

于 2012-02-16T18:56:54.940 に答える