jQuery live draggable / live droppable？答案

【问题标题】：jQuery live draggable / live droppable?jQuery live draggable / live droppable？
【发布时间】：2010-06-10 17:26:28
【问题描述】：

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

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

这发生在 jQuery UI 文件中。第 56 行。

大约 400 次左右。所以基本上我正在寻找一种方法来做 live() 与可拖动和可放置。

.draggables 位于#visitors（一个 ul）中。 droppables 位于#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'
});

【问题讨论】：

标签： jquery ajax jquery-ui live

【解决方案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 }); 
});

【讨论】：

【解决方案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").mouseenter();

结果：以编程方式添加或“实时”放置区将变为可放置。

【讨论】：