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 で Selection を使用しようとすると、機能しません。$( "#sortable" ).selectable();

4

1 に答える 1

1

さて、あなたがあなた自身でカスタム関数を書きたくないのでなければ、問題はあなたのソート可能なリストに2つのマウスイベントがあるということです。あなたができることは handle、次のようなソート可能な関数を追加することです。

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

これで、cssを使用してハンドルを配置できます。jqueryフォーラムで良い例を見つけました：http： //jsbin.com/aweyo5/1/edit

おそらく、これら2つの機能を組み合わせる最良の方法です。

于 2013-02-15T13:18:03.557 に答える