9

並べ替え可能な要素を使用できるようにすることはできますが、それでもユーザーは要素内のテキストをコピーして貼り付けることができますか？

<div class="sortable">
   <div class="pseudo-sortable">Foo</div>
   <div class="pseudo-sortable">Bar</div>
   <div>other stuff that i don't care if a user 
        can't copy (maybe images or buttoms)</div>
</div>

私は簡単に行うことができます：

$('.sortable').sortable({cancel: '.pseudo-sortable'});

これにより、ブラウザでテキストを選択し、必要に応じてコピーして貼り付けることができます。ただし、これにより、人がドラッグ/ドロップできないようになります。ですから、キャンセルから始めたいと思いますが、マウスがコンテナの外側に一定の距離を移動すると、疑似ソート可能オブジェクトはキャンセルされなくなります。それは理にかなっていますか？

これが不可能な場合、私の最後のオプションは、コンテナーを並べ替え可能と並べ替え不可能に切り替えるトリガーを適用して、テキストを選択できるようにすることですが、UIクリックを最小限に抑えることをお勧めします。

4

2 に答える 2

19

テキストを に入れるのは<span>どうですか？

HTML

<ul id="sortable">
    <li><span>Item 1</span></li>
    <li><span>Item 2</span></li>
    <li><span>Item 3</span></li>
    <li><span>Item 4</span></li>
    <li><span>Item 5</span></li>
    <li><span>Item 6</span></li>
    <li><span>Item 7</span></li>
</ul>

jQuery

$("#sortable").sortable({
    revert: true,
    cancel: "#sortable li span"
});

ここで試してみてください: http://jsfiddle.net/6uXx8/

于 2010-11-12T19:50:02.627 に答える
1

ハンドルを追加してみてください。アイデアは、たとえば要素内のアイコンなど、ハンドルからのみアイテムのドラッグを開始できるということです。

于 2010-11-12T17:36:00.653 に答える