custom drag and drop 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.

can you provide a fiddle or code example of what you have tried so far? — scniro
Thanks for reply. Already got it working. It was more of a concept problem. Of course that if I place element exactly under cursor that it will get all the events. Thankfully pointer-event css solves the problem. — Miro Krajci

Miro Krajci Miro Krajci · Accepted Answer · 2015-01-10T03:47:26

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.

custom drag and drop HTML5

1 Answers