1

サーバー側で作成されたdivでドラッグアンドドロップコードが完全に機能しますが、jqueryを使用して（動的に）divを作成すると、コンテナに何もドロップできないようです...

$('.dropcontent').droppable({
            accept: '.item',
            drop: function(ev, ui) {
               /* do something */
            }    
        });

        $(".item").draggable({  
           helper:'clone',
           appendTo: 'body',
           snap: true,
           revert: true

        });

    <div id="row1seo" class="dropcontent" > </div>   // original code on server side
    <div id="row1seo" class="dropcontent ui-droppable"> </div> // the above line becomes this on client side showing it has "binded" with the droppable
    <div id="row2seo" class="dropcontent"></div> // this the dynamically created div which doesn't seem to bind with the droppable. this is created in php file using ajax to retrieve it

私も試してみました

 $(".dropcontent").live('droppable', function() {
......
});

うまくいかないようです...これを修正する方法はありますか？

ありがとう

4

1 に答える 1

3

生成された要素で機能するように、ドラッグ機能をライブにする必要があります。残念ながら、 jQuery のlive()関数はドラッグ アンド ドロップを処理しないため、自分で作成する必要があります。たとえば、この関数を使用します。

(function ($) {
    $.fn.liveDraggable = function (opts) {
        this.live("mouseover", function() {
            if (!$(this).data("init")) {
                $(this).data("init", true).draggable(opts);
            }
        });
        return $();
    };
}(jQuery));

次のように呼び出します。

$( "element" ).liveDraggable()

ドロップ可能なものも簡単に作成できます！ＧＬ！

于 2012-05-11T10:36:08.530 に答える