1

I'm developing a web app that keeps track of who is to speak next on a conference call or a meeting. After multiple speakers are added to the stack (left side) the order of speakers can be rearranged. The app works correctly in Chrome and Firefox, but I am unable to drop name tabs on new locations with the Edge browser. I don't know what I'm doing wrong. I've implemented this but it still doesn't work. This is my drag and drop logic:

function dragStart(event) {
    heldItem = event.target;
    console.log("dragging started");
    event.dataTransfer.setData('text', event.target.id);
}

function dragDrop(event) {
    event.preventDefault ? event.preventDefault() : (event.returnValue = false);

    var x = event.clientX;
    var y = event.clientY;
    var index = 0;
    var child;

    elementUnderMouse = document.elementFromPoint(x, y);
    child = elementUnderMouse;

    while ((child = child.previousElementSibling) != null) {
        index++;
        console.log("in loop");
    }

    console.log(index);

    if(event.target.className == "speaker") {
        stackList = document.getElementById("stackList");
        stackList.insertBefore(heldItem, stackList.childNodes[index]);
        console.log("item appended");
    }
}

function dragOver(event) {
    event.preventDefault ? event.preventDefault() : (event.returnValue = false);
    console.log("dragging..");
}

The app is live at victoragosto.com/stacker and the full source code is at https://github.com/otsoga/stacker

  • Could it be related to https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8007622/ ? The `event.dataTransfer.setData()` call? – Janaka Bandara Mar 28 '18 at 14:20

0 Answers0