0

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 上使用选择时，它不起作用。$( "#sortable" ).selectable();

4

1 回答 1

1

好吧，除非您想自己编写自定义函数，否则问题是，您的可排序列表中有 2 个鼠标事件。您可以做的是添加 handle这样的可排序功能：

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

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

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

于 2013-02-15T13:18:03.557 回答