28

jQuery UI の selectable と sortable を組み合わせる方法を知っている人はいますか? このスクリプト: http://nicolas.rudas.info/jquery/selectables_sortables/は Chrome では機能せず、プラグインも変更されています。

4

5 に答える 5

34

rdworthからこの非常に簡単な解決策を見つけました:

CSS:

ul { width: 300px; list-style: none; margin: 0; padding: 0; }
li { background: white; position:relative;margin: 1em 0; padding: 1em; border: 2px solid gray; list-style: none; padding-left: 42px; }
li .handle { background: #f8f8f8; position: absolute; left: 0; top: 0; bottom: 0; padding:8px; }
.ui-selecting { background: #eee; }
.ui-selecting .handle { background: #ddd; }
.ui-selected { background: #def; }
.ui-selected .handle { background: #cde; }

HTML:

<ul id="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

Javascript:

$( "#list" )
    .sortable({ handle: ".handle" })
    .selectable({ filter: "li", cancel: ".handle" })
    .find( "li" )
        .addClass( "ui-corner-all" )
        .prepend( "<div class='handle'><span class='ui-icon ui-icon-carat-2-n-s'></span></div>" );

参照:このフィドル。

于 2012-04-03T12:18:47.373 に答える
5

http://jsfiddle.net/t9YTB/

これは私があなたに与えることができるのと同じくらいです:)しかし、アイデアはそこにあります. すべてが完全ではありませんが、うまくいけば、値をいじって、そこからどのようになるかを確認できます:)

于 2011-02-23T13:18:23.557 に答える
0

私のjQuery base-arsenalの一部には、次のものが含まれています.何かをドラッグして代わりにテキストを選択してしまうと、通常は面倒です...

// disables text selection on sortable, draggable items 
$( ".sortable" ).sortable();
$( ".sortable" ).disableSelection();

「無効」を「有効」に切り替えることができるかどうかはわかりませんが、私の $.02 があります。試してみなくても..常識的には、同じ「グループ」要素内に非アクティブなセクションを定義して、ドラッグアクションの「ハンドル」を提供する必要があるかもしれないことを示唆しています....そうしないと、それらのクリックが容赦なく選択/編集する意図...

于 2011-06-20T16:45:13.870 に答える
0

これを試して。Ctrl + Click複数選択と並べ替えに使用できます

http://jsfiddle.net/r83vrm0q/

于 2015-01-17T21:48:27.817 に答える