настраиваемое перетаскивание HTML5

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

Проблема в том, что, поскольку этот повторяющийся элемент всегда находится точно под курсором, невозможно захватить события перетаскивания или перетаскивания на других элементах. Независимо от того, где в DOM связан «дублирующий» элемент, он всегда блокирует переход. Если я перемещаю повторяющийся элемент так, чтобы он не находился под курсором, он работал, но это сводит на нет цель создания бесшовного дублирующего элемента.

Есть ли способ игнорировать этот повторяющийся элемент, чтобы элементы, находящиеся под ним, вместо этого получали бы событие ondragover? Обычно событие просто перемещается по направлению к родительскому элементу, к которому привязан повторяющийся элемент.


person Miro Krajci    schedule 10.01.2015    source источник
comment
Можете ли вы предоставить скрипку или пример кода того, что вы пробовали до сих пор?   -  person scniro    schedule 10.01.2015
comment
Спасибо за ответ. Уже заработал. Это была скорее проблема концепции. Конечно, если я помещу элемент точно под курсором, он получит все события. К счастью, указатель-событие css решает проблему.   -  person Miro Krajci    schedule 10.01.2015


Ответы (1)


Все заработало. Кажется, что он работает (элемент-призрак не блокирует события), если в его классе есть:

.duplicateGhostElementClass {
  pointer-events: none;
}

Возможно, это кому-то сэкономит время.

person Miro Krajci    schedule 10.01.2015