Jquery droppable 选项破坏了该元素的可拖动行为答案

【问题标题】：Jquery droppable option breaks the draggable behavior of that elementJquery droppable 选项破坏了该元素的可拖动行为
【发布时间】：2011-09-21 17:29:56
【问题描述】：

如果我为同样可拖动的 droppable 指定 accept 选项，这会破坏该 droppable 的可拖动行为。

为了防止嵌套这些可拖动的 droppable，我将 accept 选项指定为仅属于 droppable 的类。我用$('div.link_drop_box', $('#'+card_id)).droppable({ accept: '.link' }); 做到这一点。这是我指定可放置可拖动 div 的 javascript。

    // 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。第一个仍然是可拖动的，其他的则不是。什么可能导致接受选项破坏可拖动行为。

【问题讨论】：

标签： jquery drag-and-drop

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

【讨论】：