jQuery live draggable/live droppable?

Question

В основном есть две таблицы: Компании и посетители. В настоящее время можно перетащить посетителей в компании. Прекрасно работает. Как только функция сброса происходит, есть два $ .post. Первый сохранит перетаскивание в базу данных. Второй обновляет посетителей, потому что информация постоянно изменяется. Проблема, однако, в том, что, как только заканчивается второй $ .post, Firebug продолжает появляться следующее сообщение об ошибке:

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

Что происходит в файле пользовательского интерфейса JQuery. В строке 56.

около 400 раз или около того. Так что в основном я ищу способ сделать live() с draggable и droppable.

The .draggables находятся в #visitors (ul). Папки находятся в #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) Создание х элементов

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

Результат: Programatically добавлены или 'живые' DropZones будут Droppable.