Question

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

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

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

大约400次左右。所以基本上我正在寻找一种方法来使用draggable和droppable做live（）。

.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将被删除。

jQuery live draggable / live droppable？

2 个答案: