帶有可拖曳排序項目的Jquery Selectbox控件

如何支持拖拽項目以更改JQuery SelectBox控件中元素的順序？帶有可拖曳排序項目的Jquery Selectbox控件

<style> 
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
#sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; } 
#sortable li span { position: absolute; margin-left: -1.3em; } 
#selectable .ui-selecting { background: #FECA40; } 
#selectable .ui-selected { background: #F39814; color: white; } 
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; } 
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; } 
</style> 

$(function() { 
$("#selectable").selectable(); 

$("#sortable").sortable(); 
$("#sortable").enableSelection(); 

}); 

<ol id="selectable"> 
<li class="ui-widget-content">Item 1</li> 
<li class="ui-widget-content">Item 2</li> 
<li class="ui-widget-content">Item 3</li> 
<li class="ui-widget-content">Item 4</li> 
</ol> 
<ol id="sortable"> 
<li class="ui-widget-content">Item 1</li> 
<li class="ui-widget-content">Item 2</li> 
<li class="ui-widget-content">Item 3</li> 
<li class="ui-widget-content">Item 4</li> 
</ol>

當我嘗試在#sortable上使用Selection時，它不起作用。 $("#sortable").selectable();

來源

2013-02-15 Riddhi M.

如果你想任何幫助給我們展示一些代碼。如果可能的話，創建一個jsfiddle.net用於測試目的。你不能指望人們做你的工作，並花時間在Google上搜索，並假設你的問題可能是什麼。你有什麼嘗試，什麼是不工作的部分？ – gulty 2013-02-15 10:10:24

添加代碼以支持問題 – 2013-02-15 11:00:38

那麼，除非你想自己寫一個自定義函數，否則問題是，你的可排序列表中有2個鼠標事件。你可以做的是這樣的排序功能附加handle：

$("#sortable") 
.sortable({ handle: ".handle" }) 
.selectable()

現在你可以使用CSS來放置手柄。我在jQuery論壇中找到了一個很好的例子： http://jsbin.com/aweyo5/1/edit

可能是組合這兩個函數的最好方法。

來源

2013-02-15 13:18:03 gulty

帶有可拖曳排序項目的Jquery Selectbox控件

回答

相關問題