jQuery-UI可拖拽和排序

所以我一直在使用這個例子：http://jqueryui.com/demos/draggable/#sortable，我已經完成了我的產品。不過，我想做兩個重大的改變。jQuery-UI可拖拽和排序

我不希望第二個表（在我的例子toList）是它自己的排序。我只希望它接受來自第一個列表中的項目（在我的示例中爲fromList）。
當用戶從第一個列表（fromList）拖拽一個項目並將其放入第二個列表（toList）時，我希望該項目被強制到底部。

建議？這是迄今爲止我的工作小提琴。 http://jsfiddle.net/CrtFD/

2011-10-19 Ryan Mulready

嘗試：

編輯：每下面的註釋：

jQuery(document).ready(function(){ 
    jQuery("#fromList li").draggable('destroy').draggable({ 
     connectToSortable: "#toList", 
     revert: "invalid", 
     containment: '#equipCont', 
     helper: function(e, ui) { 
      return jQuery(this).clone().css('width', jQuery(this).width()); 
     } 
    }); 
    jQuery("#toList").droppable('destroy').droppable({ 
     drop: function(e, ui) { 
      var dragClone = jQuery(ui.draggable).clone(); 
      jQuery("#toList").append(dragClone); 
     } 
    }); 
    jQuery("ul, li").disableSelection(); 
});

來源

2011-10-19 21:45:42 fehays

Hmmn，可能在正確的道路上，但你的例子有兩個錯誤。 1它不再克隆項目fromList實際上是移動它。 2一旦我將一個項目移動到toList中，它仍然是可拖動的。 –

下面是我如何完成它，使用你的代碼，雖然如此+1。 http://jsfiddle.net/abzYK/ –

您希望您的toList可以放置，而不是可排序。這個例子似乎說明您所要完成的任務：使用droppable您toList http://jqueryui.com/demos/droppable/#shopping-cart

來源

2011-10-19 21:45:40

同樣的問題如上。儘管它確實處理了克隆，但第二個列表中的項目仍可拖動。 –

jQuery-UI可拖拽和排序

回答

相關問題