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