@zhuravlev125

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы