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！

拖放动态创建的div

1 个答案: