0

Here's a video partially showcasing the problem: https://i.imgur.com/Ssi8DyF.mp4

When dragging and dropping elements sometimes additional ghosting elements are dragged along. The behavior was harder for me to replicate so the best advice I can give you to showcase it is to drag 4-5 elements onto the top row and then start horizontally swapping positions between them till the weird behavior occurs.

This is not a totally visual error, sometimes areas without the draggable=true attribute will start being eligible for dragging causing drag and drop of the drop-locations along with other elements on the side and below. This will also cause ghost elements to be dragged and dropped in empty areas with null values filling their fields..

This is the javascript code responsible for initializing the drag-n-drop items: https://github.com/alibiss/dnd-testing/blob/main/app.js
This is a live testing page on my github repo: https://alibiss.github.io/dnd-testing/

What I tried so far is adding stopPropagation() to my events thinking they were somehow firing multiple times for reasons unknown to me, but it didn't help mitigating the problem.

The script uses the dragstart, dragover and drop events to:

  1. Send a stringified JSON payload wherever the drop event occurs
  2. Set .container as the only allowed drop zones
  3. Fire the remaining part of the code once .container receives the payload

Once the element has been dropped, the script will determine if it came from the bars below (offering sort of templates to clone from) or if the user is attempting to swap top bar elements positions (ex: element on slot 2 swapping position with element on slot 7).

I made sure to report in console what datatype was being received on every drop and I found this in the console when the "ghosting" error manifests: Array(4) [ "text/_moz_htmlcontext", "text/_moz_htmlinfo", "text/html", "text/plain" ]. text/plain is my normal payload but out nowhere additional data types are being attached to dataTransfer

Adding e.dataTransfer.clearData(); at the very top of the dragstart callback functions seem to get rid of the additional noise being passed along but I now believe that has nothing to do with my issue since the additional data being carried over isn't even being used.

When dragging an item (along with the additional ghosting elements) onto the console input field, a newline element + my payload is sometimes being pasted. Maybe whitespaces and other textual elements are being carried over somehow?

I made a simplified version of my code: https://jsfiddle.net/jzrx8913/

It uses only the dragstart event (where I believe the problem lies) and in fact, if you spam click from the lower bars on the top bar, you'll eventually experience "ghosting" with more than one item being moved at the same time, along with empty .container slots

I found a way to replicate the ghosting reliably:

  1. Click somewhere on the document <body>
  2. Press Ctrl+A
  3. Try now to drag a random item

I think some items are being counted as selected without visual feedback for some reason

alibiss
  • 1
  • 2

1 Answers1

0

The "ghosting" was actually multiple items being dragged along the one node selected during the drag and drop events. Using Ctrl+A or simulating a selection of the items with a click+drag selection box made me aware of the problem.

The solution for me was making sure there are no additional selected elements during the dragstart event. Here's a convenient function I found in another thread: https://stackoverflow.com/a/880518/21273012

node.addEventListener("dragstart", (e) => {
    e.dataTransfer.clearData();
    clearSelection();

    e.dataTransfer.setData("text/plain", JSON.stringify({
        name: "something"
        data: 1234
    }));
})

function clearSelection() {
    if(document.selection && document.selection.empty) {
        document.selection.empty();
    } else if(window.getSelection) {
        const sel = window.getSelection();
        sel.removeAllRanges();
    }
}
alibiss
  • 1
  • 2