0

Ajaxを介してページに動的に追加されるJQueryUIDroppableがあります。ガイダンスに従ってDroppablesをライブで接続しようとしています。

jQuery UI Droppable：ライブにする方法は？

ドラッグアンドドロップの最初の試行では、hoverClassは接続されておらず、ドロップターゲットも登録されDroppableていません（ドロップイベントハンドラーは起動しません）。その後の試行では、期待どおりに機能します。

フィドル： http： //jsfiddle.net/ericjohannsen/ESCN9/

ドロップ機能を初めて動作させるにはどうすればよいですか？

4

1 に答える 1

2

コードは、「ctFilterDropArea」要素にカーソルを合わせ、ライブ ドロップ可能な機能を開始する場合にのみ機能します。

別の div がドラッグされたら、liveDroppable の実装を開始してみてください。

JSFiddle :- http://jsfiddle.net/ESCN9/3/

$.fn.liveDroppable = function (opts) {
    if (!$(this).data("ctDropInit")) {
        $(this).data("ctDropInit", true).droppable(opts);
    }
};

$('#dragMe').draggable({
    cursor: "move",
    distance: 20,
    opacity: 0.7,
    helper: 'clone',
    start: startDroppable
});

function startDroppable() {
    $('#ctFilterDropArea').liveDroppable({
        hoverClass: "ctDropHover",
        drop: function (event, ui) {
            alert("Dropped!");
        }
    });
}
于 2013-02-15T06:34:28.940 に答える