如何更改大型可拖動項目的內容以便更容易丟棄？

Question

這是一個小提琴：http://jsfiddle.net/adMXj/

我有很大的可拖動項目，需要放入更小的容器。當容器和​​物品的尺寸相似時，這很好，但是當它是一個大的可拖動元素時效果不好。

在拖動時，我希望可拖動的內容更改爲「選定的項目」。

你能幫忙嗎？

Try it out yourself here並注意您有多少可拖放區域取決於您拖動的可拖動項目的位置。

這裏是我的JS：

$('.items > li').draggable({ 
    revert: "invalid", 
    helper: function(event) { 
     var helperList = $('<ul class="draggable-helper">'); 
     if ($(this).is('.active')){ 
      helperList.append($(this).siblings('.active').andSelf().clone()); 
     } else { 
      helperList.append($(this).clone()); 
     } 
     return helperList; 
    } 
}); 

$('.drop-containers li').droppable({ 
    drop: function(event, ui) { 
     console.log('dropped'); 
     var $this = $(this); 
     var selectedObjects = new Array(); 
     if (ui.draggable.hasClass('active')) { 
      console.log('active'); 
      // get all active items 
      $('ul.items > li.active').each(function() { 
       console.log($(this).attr('id')); 
       selectedObjects.push($(this).attr('id')); 
       $(this).remove(); 
      }); 
     } else { 
      console.log('not active'); 
      selectedObjects.push(ui.draggable.attr('id')); 
      ui.draggable.remove(); 
     } 
     $this.append(', ' + selectedObjects.join(', ')); 
    } 
}); 

Answer 1

我不能完全肯定，但我覺得這是你以後有什麼。請檢查此：http://jsfiddle.net/XuZvA/1/

我正在使用drag event來修改helper對象。

Answer 2

我通過改變可放開項目的寬容處理這個問題。

$('.drop-containers li').droppable({ 
    tolerance : 'pointer' 
}); 

更改寬容是一種很好的解決辦法，這樣你就不必改變拖動對象的外觀可投放對象也不是。 如果你想刪除拖動的項目更容易，改變公差爲「指針」或「觸摸」

公差指定用於測試是否可拖動懸停在可投放的模式。可能的值：

• 「適合」：可拖動的可重疊的droppable完全重疊。
• 「相交」：（默認）可拖拽在兩個方向上至少可重疊50％。
• 「指針」：鼠標指針與可放置區域重疊。
• 「觸摸」：可拖拽與任何數量的可拖拽重疊。

http://api.jqueryui.com/droppable/#option-tolerance