jQuery的排序，從靜態列表

Question

拖

不能確定的，解釋什麼，我試圖做的，所以我一直在玩它的​​最佳方式，請參閱：http://bit.ly/1Fm6qgc

我想的「小部件列表'基本上是li的 - 現在我希望能夠將它們拖到可排序的面板中，但是，我已經在上面的示例中工作了，但是，當我將「小部件」放到可排序的面板中時，我希望「小部件」保留在窗口小部件列表中，以便我可以將窗口小部件的多個實例放置到多個可排序的面板中。

我希望這是有道理的，如果你有任何其他想法，我如何能夠實現這一點，那麼將不勝感激。

謝謝

Answer 1

我明白你的目標，我已經更新了你的小提琴。從語義角度來看，Reusable Draggable Widgets Panel應該只是可拖動的小部件，而不是可排序的列表。這很有意義，因爲您通常不希望用戶將已使用/更改的小部件從其自己的Target Widgets Sortable Lists拖回到主要的Reusable Draggable Widgets Panel中，如新小提琴中所示。作爲一個方面說明，Reusable Draggable Widgets Panel確實採用了相同的幫助：「克隆」選項，但需要額外注意，如SO post所示，確保原始克隆顯示。但正如我之前所說的，Reusable Draggable Widgets Panel只是可拖動元素而不是排序列表更合理。

這裏是更新後的工作fiddle。

快速瞭解和解釋（JS）：

function removeHighlight(){ 
    // Enable all sortables 
    $('.sort').each(function(){ 
     var $this = $(this); 
     $this.css('borderColor','gray'); 
     $this.sortable('enable'); 
    }); 
} 

function addHighlight(){ 
    // Check number of elements already in each sortable 
    $('.sort').not(this).each(function(){ 
     var $this = $(this); 
     if($this.find('li:not(.l-header)').length >= 3){ 
      $this.css('borderColor','red'); 
      $this.sortable('disable'); 
     } else { 
      $this.css('borderColor','gray'); 
      $this.sortable('enable'); 
     } 
    }); 
} 
// use both mousedown and mouseup events to handle highlighting 
// and enabling/disabling of sort lists. 
// Using the stop/start callbacks of sortable/draggable ui plugin 
// is unreliable, even after calling list.sortable("resfresh") 
$('ul.sort, ul.d-widgets').on("mousedown", addHighlight); 
$('ul.sort, ul.d-widgets').on("mouseup", removeHighlight); 

$(".d-widgets li:not(.l-header)").draggable({ 
    connectToSortable: ".sort", 
    helper: "clone", 
    revert: "invalid" 
}); 
$("ul.disable-highlight li:not(.l-header)").disableSelection(); 

$('.sort').sortable({ 
    revert: 'invalid', 
    connectWith: '.sort', 
    items: '> li:not(.l-header)' 
}); 

HTML：

<ul class="disable-highlight d-widgets"> 
    <li class='l-header'>Reusable Draggable Widgets Panel</li> 
    <li></li> 
    <li></li> 
</ul> 
<ul class='disable-highlight sort'> 
    <li class='l-header'>Target Widgets Sortable Lists</li> 
    <li></li> 
    <li></li> 
</ul> 
<ul class='disable-highlight sort'> 
    <li class='l-header'>Target Widgets Sortable Lists</li> 
    <li></li> 
    <li></li> 
</ul> 
<ul class='disable-highlight sort'> 
    <li class='l-header'>Target Widgets Sortable Lists</li> 
    <li></li> 
    <li></li> 
</ul> 

CSS：

.d-widgets, .sort { display:inline-block; margin:5px; border:1px solid grey; vertical-align:top; } 

.d-widgets{ 
background-color: #81d8d0; 
} 
} 
ul { min-width:60px; min-height:20px; } 
li { width:50px; min-height:15px; margin:5px; border:1px solid silver; cursor:move; background-color:white; } 

.l-header{ 
    cursor:auto; 
    width:80px; 
    padding:4px; 
    border:none; 
    border-bottom:1px solid grey; 
    font-size:10px; 
} 

編輯銷燬小部件：

正如我在我的評論中指出的那樣，從我的角度來看，專門指定刪除小部件的區域將是一個很好的方法，如我更新的fiddle中所示。