Как сделать drag and drop строк таблицы?

Question

[Владимир]

Проблема в следующем, сделал перетаскивание строк таблицы, они требуют библиотеку "jquery-ui.min.js" так же нужна обычная либа "jquery.min.js". При нажатии на кнопку добавляется блок(div) в котором с inputa берется значение и заносится в таблицу текущего блок. Все ничего но с номером блока, к примеру если блок №2 то при одном нажатии добавляется сразу 2 строки в таблицу если если блок №3 то при одном нажатии добавляется сразу 3 строки в таблицу. Обнаружил что бага работает когда подключить сразу две эти библиотеки, если отключить "jquery-ui.min.js" то добавление работает корректно но не работает перетаскивание строк :) Пробовал скачивать отдельный плагин на jquery, та же беда. Подскажите как решить проблему, пример кода liveweave.com/hkkSKY

Comments

[trushka]

Шо-то вместо кода по ссылке какой-то хелоуворд..

[Владимир]

trushka: извиняюсь, почему то не выходит сохранить код, вот рабочая ссылка https://www.dropbox.com/sh/uu4o0t9ll671ng7/AADv_Yd...

Answer 1

[Stalker_RED]

Собрал ваш пример на jsfiddle https://jsfiddle.net/bfqpfj91/
$('.box_btn').click(addTask); привязывает ф-цию addTask ко всем кнопкам с классом box_btn, какие найдет. Получается, что когда вы трижды нажали кнопку "Add TODO List", то на первой кнопке "Add task" будет уже три обработчика, на второй два и на третьей один.

Ну и вообще у вас жестокая смесь ванильного js и jQuery, как вы сами в этом всём не путаетесь - хз.

UPD: немного переписал, сократив код раз в пять и сделав его чуток более читабельным https://jsfiddle.net/bfqpfj91/3/

1. Выбросил адскую генерацию html из кода. Вообще, лучше шаблонизатором такие штуки делать, но для jsfiddle покатит и так.
2. Вынес все обработчики в начало файла и перевесл их на #contentBlock. Нет смысла дублировать привязывая к каждой кнопочке отдельно.
3. Переписал editTask на contenteditable, теперь там всего пара строк кода.
4. Вынес в CSS иконку dragHandle и выбросил fixHelper т.к. непонятно что он там делает.

Comments

[Владимир]

Спасибо большое, понял ошибки. Пока не знаю других способов решения, по этому говнокод.