javascript - jQuery のドラッグ可能で並べ替え可能な入力要素

Question

jQuery UI ライブラリを使用して要素をドラッグおよびソートします: http://jqueryui.com/demos/sortable これは正常に動作しますが、テキストエリアなどの入力要素をドラッグできません。これらのテキストエリアは無効になっているため、書き込む必要はありません。少しググったところ、この問題を抱えているのは私だけではないことに気付きました。これにはいくつかの半解決策がありますが、それらはすべて時代遅れのようです。(jQuery は急速に発展します)。

Answer 1

私があなたを助けることができるなら、あなたは私にいくつかのコードを提供する必要があります.

（注：テキストエリアをつかんでいる間にアイテムをドラッグしようとしている場合は、選択のオン/オフを切り替えるスイッチを実装する必要があります。テキストエリア内をクリックすることでいつでもテキストエリアを編集できる別のアプローチをお勧めします。並べ替えには、取ってつかみます。）

jQuery の sortable は、リスト、つまり is<ul>および<ol>containsで機能します<li>。このような問題は、多くの場合、不適切な html が原因で発生します。

<ul class="my-items">
<li><textarea></textarea></li>
<li><textarea></textarea></li>
<li><textarea></textarea></li>
<li><textarea></textarea></li>
</ul>

jQuery

 $( ".my-items" ).sortable();

リスト項目内のテキスト選択を無効にしたい場合は、すべてのテキスト要素でそれを行います。テキストエリアではありません。p、span、div でテキストをラップし、それらの要素でのみ disableSelection() を呼び出します。

また、スクリプトのトラブルシューティングを行う前に、html を検証することをお勧めします。私はhttp://validator.w3.org/サービスを好みます。

Answer 2

これはうまくいくはずです：

HTML:

<div class="sortable-wrapper">
<ul id="sortable-list">
<div class="ui-state-default">
<textarea></textarea>
</div>
</ul>
</div>

jQuery:

$( "#sortable-list" ).sortable();
$( "#sortable-list" ).disableSelection();