Jquery droppable選項打破了該元素的可拖動行爲

Question

如果我爲可拖動的droppable指定accept選項，則會破壞該droppable的可拖動行爲。

爲了防止這些可拖放droppables的嵌套，我指定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); 
     } 
    }); 

現在droppable div不可拖動了。奇怪的行爲是有幾個這樣的可丟棄的div。第一個是可拖動的，其他的不是。什麼可能導致accept選項打破可拖動的行爲。

Answer 1

發現問題。應該把所有的選項放​​在一個droppable方法中。以下作品。

$('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", 
    });