Опция Jquery droppable нарушает перетаскиваемое поведение этого элемента

Question

Если я укажу опцию accept для перетаскиваемого объекта, который также перетаскивается, это нарушает перетаскиваемое поведение этого перетаскиваемого объекта.

Чтобы предотвратить вложение этих перетаскиваемых объектов, я указываю, что параметр accept должен быть только тем классом, который принадлежит этому объекту. Я делаю это с $('div.link_drop_box', $('#'+card_id)).droppable({ accept: '.link' });. Вот javascript, где я указываю буксируемый перетаскиваемый div.

    // Define more LinkCard options
    $('#'+card_id).css('width',350);
    $('#'+card_id).css('height',250);
    $('#'+card_id).resizable();
    $('#'+card_id).draggable();
    $('#'+card_id).draggable("option", "handle", '.linkcard_header');
    $('#'+card_id+' p').editableText();
    $('#'+card_id).draggable({ stop: function(event, ui) { update_linkcard_xml(card_id) } });

    // Make droppable
    $('div.link_drop_box', $('#'+card_id)).droppable({ accept: '.link' });
    $('div.link_drop_box', $('#'+card_id)).droppable({
        drop: function( event, ui ) {
            var $item = ui.draggable;
            $item.fadeOut(function() {

            $item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
        }); 
        $item.appendTo( this );
        }
    });

Теперь бросаемые div больше не перетаскиваются. Странное поведение состоит в том, что есть несколько таких сбрасываемых div. Первый по-прежнему перетаскивается, остальные нет. Что может привести к тому, что параметр accept нарушит перетаскиваемое поведение.

Answer 1

Нашел проблему. Следует поставить все варианты в один сбрасываемый метод. Следующие работы.

    $('div.link_drop_box', $('#'+card_id)).droppable({
       drop: function( event, ui ) {
          var $item = ui.draggable;
          $item.fadeOut(function() {
             $item.css( {"left":"", "top":"", "bottom":"", "right":"" }).fadeIn();
          }); 
          $item.appendTo( this );
          /* update_links_xml("card_id"); */
       },
       out: function( event, ui ) {
          /* update_links_xml("card_id"); */ 
       },
       accept: ".link",
     });