Search code examples
javascripthtmldrag-and-dropcustom-element

custom drag and drop HTML5

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 standard way to do that, 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.

The problem is that since this duplicate element is always exactly under the cursor, it is impossible to capture dragover or dragenter events on other elements. No matter where in the DOM the "duplicate" element is, it always blocks dragover. If I move the duplicate element so it’s 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 bubble towards the parent of where the duplicate element is.

Solution

  • 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.