拖放动态创建的 div

Question

我有一个拖放代码可以在服务器端创建的 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() {
......
});

似乎不起作用...任何想法如何解决这个问题？

谢谢

Answer 1

您必须启用拖动功能，以便它适用于生成的元素。太糟糕了 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()

您也可以轻松制作一个可放置的！ GL！