jQuery live draggable/live droppable？

Question

基本上有两个表:公司和访客.目前,可以将访客拖到公司.效果很好.一旦drop函数发生,就会有两个$ .post.第一个将拖动保存到数据库.第二个更新访问者,因为信息不断变化.但问题是,只要第二个$ .post结束,Firebug就会不断弹出以下错误:

d(this).data("draggable") is null

这发生在jQuery UI文件中.在56号线上.

约400次左右.所以基本上我正在寻找一种方法来实现live()与draggable和droppable.

.draggables位于#visitors(ul)中.dropable是在#companies(一张桌子).

谢谢!

$(".draggable").draggable({
    revert:true
});
$(".droppable").droppable({
    drop: function(ev, ui) {
        $(this).text($(ui.draggable).text());

        $.post('planning/save_visit', {user_id: $(ui.draggable).attr('id'), company_id: $(this).attr('id'), period: $('ul.periods li.active').attr('id')});

        $.post('planning/' + $('ul.periods li.active').attr('id'), {visitors:true}, function(data){
            $('#visitors').html(data);
        });
    },
    hoverClass: 'drophover'
});

Answer 1

当重新加载访问者时,你正在替换所有可拖动的元素$('#visitors').html(data);- 所以那些之前可拖动的元素被删除并替换为不可拖动的新元素.(我很确定你意识到这一点,因为提到.live(),所以这只是为了完整性)

但是,您确切地知道访问者元素何时被更改,因此不是替代.live()为什么不在更改后立即再次请求可拖动效果.在更换它们之前,可能更安全地"破坏"旧的可拖动物,但我不确定这是否是必要的.

$.post('planning/' + $('ul.periods li.active').attr('id'), {visitors:true}, function(data){      
    $(".draggable").draggable("destroy");
    $('#visitors').html(data); 
    $(".draggable").draggable({ revert:true }); 
}); 

Answer 2

1)创建x元素

<div class='dropzone'></div>
<div class='droppableItem'></div>

2)将监听器添加到所有Dropzones

$(".dropzone").liveDroppable( { hoverClass:'drophover', accept:'.droppableItem' });

3)定义自定义函数liveDroppable

(function ($) {
   $.fn.liveDroppable = function (opts) {
      this.live("mouseenter", function() {
         if (!$(this).data("init")) {
            $(this).data("init", true).droppable(opts);
         }
      });
      return $();
   };
}(jQuery));

4)无论何时以编程方式添加新的dropzone,只需调用..

    $(".dropzone").mouseenter();

结果:以编程方式添加或"实时"的dropzones将被删除.