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()

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

于 2012-05-11T10:36:08.530 回答