Question

如何支持拖动项以更改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();

Answer 1

好吧，除非您想自己编写自定义函数，问题是，您的可排序列表中有2个鼠标事件。您可以做的是在可排序函数上添加handle，如下所示：

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

现在您可以使用css放置句柄。我在jquery论坛中找到了一个很好的例子： http://jsbin.com/aweyo5/1/edit

可能是组合这两个功能的最佳方式。

Jquery Selectbox控件，带有可拖动的可排序项

1 个答案: