自定义拖放HTML5

Question

I am trying to use drag and drop to reorder elements in the list (pure javascript). I would like to stylise the "ghost element" during the drag operation. Since I read that there is no way how to do that standartly, I am creating duplicate element (styled as I want) positioned exactly where original element should be during drag operation and its position is updated inside ondrag event.

Problem is that since this duplicate element is always exactly under cursor it is impossible to capture dragover or dragenter events on other elements. No matter where in the DOM is the "duplicate" element linked it always blocks ondragover. If I move the duplicate element so its not under the cursor it works but that defeats the purpose of seamless duplicate element.

Is there some way how this duplicate element would be ignored so elements that are underneath it would get the ondragover event instead? Normally event just bubbles towards parent of where the duplicate element is linked.

Answer 1

Got it working. It seems that it works (ghost element is not blocking the events) if its class has :

.duplicateGhostElementClass {
  pointer-events: none;
}

Perhaps it saves someone some time.