JQuery сохраняет перетаскивание при удалении элемента

Question

Я пытаюсь переместить перетаскиваемый элемент в DOM, но всякий раз, когда я пытаюсь использовать replaceWith () или remove () или подобные функции, его перетаскиваемость теряется.

Можно ли заставить элемент не потерять свою перетаскиваемость при перемещении в DOM?

Answer 1

Решение состоит не в том, чтобы использовать jQuery для перемещения элементов, а в использовании чистого DOM.

То есть вместо

$('#elem').remove().appendTo($('#elem2'))

сделать

var q = $('#elem'); var el = q.get(0); el.parentNode.removeChild(el); $('#elem2').appendChild(el);

Не знаю, рекомендуется ли это, но это работает.

Answer 2

Нет, невозможно сохранить перетаскивание при замене / удалении элементов в DOM, если вы не измените ядро ​​jquery (что я не рекомендую).

Выполнение replaceWith() и remove() для элементов DOM означает, что они уничтожены, и, следовательно, любые действия или события, связанные с ними, также уничтожены.

Попробуйте создать внешний <div>, который содержит перетаскиваемое поведение, и вместо этого замените HTML-код внутри div, если вы хотите изменить перетаскиваемый элемент при падении и т. Д.

В качестве альтернативы (и менее элегантно) вы можете снова вызвать draggable() для ваших элементов после выполнения команды replaceWith(), чтобы восстановить поведение, которое вы удалили с помощью replaceWith().

Аналогично, вместо remove() попытайтесь hide() просто заставить элементы исчезнуть на некоторое время, но сохранить их поведение.

Короче говоря: вы неправильно подходите к проблеме. Измените свой подход.

Answer 3

почему бы вам не попытаться снова создать перетаскиваемое поведение после перемещения по DOM:

function xyz(){
    //move your stuff
    //create the draggable again

    $(element).draggable();
}