jQuery перетаскиваемые сортируемые элементы ввода

Question

Я использую библиотеку jQuery UI для перетаскивания и сортировки элементов: http://jqueryui.com/demos/sortable Это работает нормально, но я не могу перетащить элементы ввода, такие как текстовое поле. Эти текстовые области отключены, поэтому нет необходимости писать в них. Я немного погуглил и заметил, что я не единственный с этой проблемой. Для этого есть несколько решений, но, похоже, все они датированы. (jQuery развивается быстро).

Answer 1

Вы должны предоставить мне код, если я смогу вам помочь.

(Примечание. Если вы пытаетесь перетащить элемент во время захвата текстовой области, вы должны использовать переключатель, чтобы включить или выключить выделение. Я бы предложил другой подход, при котором вы всегда можете редактировать текстовую область, щелкая внутри. будет использовать ручку, чтобы схватить.)

Сортируемый jQuery работает со списками, то есть <ul> и <ol>, содержащими <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();