HTML5 Вложенный интерфейс DnD, позволяющий удалять только вложенные элементы в полях формы с помощью sortable.js

Я использую Sortable.JS для сортировки перетаскиванием в конструкторе форм. Я хочу, чтобы разделы можно было перетаскивать (что более или менее работает), а вопросы внутри разделов можно было перетаскивать в том же разделе или в другие разделы.

Я столкнулся с тем, что делаю класс card-text внутри каждого тега section элементом Sortable с параметром draggable, установленным на .formQuestion, что, насколько я могу судить из документации, должно работать идеально.

Однако, когда вопросы начинают перетаскиваться, единственное место, где они могут быть отброшены, - это внутри самих полей формы или другого вопроса.

Я выбираю не ту вещь для перетаскивания? Что-то не так с section.querySelector класса card-text в качестве целей?

https://jsfiddle.net/robertgreenstreet/y9pgqfxt/12/

Кроме того, по какой-то причине он не ведет себя так же на jsfiddle, как на моем компьютере, особенно в событиях ondragstart и ondragend.


javascript html drag-and-drop sortablejs
person R Greenstreet    schedule 29.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Наконец, у меня есть большая часть ответа:

Я добился того, чтобы сортировка работала внутри разделов, удалив назначение Sortable для каждого раздела и вместо этого назначив новую функцию ondragover классу .collapse (это тот же элемент, что и .card-text в исходном вопросе, фактическая область, в которой будут перетаскиваться вопросы) внутри разделов, которые (очень медленно) вычисляют, нужно ли перетаскивать элемент выше или ниже дочернего элемента, над которым он перетаскивается (Fiddle был обновлен, чтобы отразить это).

Я также назначил существующую функцию dragEnd каждому событию ondragover раздела, которое сворачивает все разделы, затем разворачивает .collapse в разделе, который в данный момент перетаскивается, а затем это событие .collapse ondragover запускается, чтобы разрешить сортировку в этом разделе.

Это не идеально и не быстро, поэтому, если кто-то может понять, почему вложенные / сгруппированные функции из Sortable не работали должным образом, эта часть все еще находится в Fiddle, прокомментировано, в цикле через sections.

person R Greenstreet    schedule 30.04.2020