Need Help with Drag n Drop...

VernonM

Hello & TIA

Need help , Having problem with Drag n Drop ?

My code seems quite simple , but I have been hung up for days :

The first DnD doesnt Drop : 'div id="itemContainer" ' , getting Errors:

Guitar-Scales-and-Boxes-Builder-4-Note-4-Frets-CLONE-MINIMAL.html:131 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.
at drop (Guitar-Scales-and-Boxes-Builder-4-Note-4-Frets-CLONE-MINIMAL.html:131:16)
at HTMLTableElement.ondrop (Guitar-Scales-and-Boxes-Builder-4-Note-4-Frets-CLONE-MINIMAL.html:78:132)

The Second DnD runs fine .

#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
.item {
display: inline-block;
border-radius: 50%;
touch-action: none;
user-select: none;
counter-increment: itemCount;
content: 'count' + itemCount;
width: 32px;
height: 32px;
font-family: Arial, Helvetica, sans-serif;
text-align:center;
font-size:28px;
z-index: 8;
}

Drag and Drop

b1

1

♯1

♮1

function allowDrop(ev) {
ev.preventDefault();
// console.log("function allowDrop(ev)")
}
function drag(ev) {
ev.dataTransfer.setData("text", e</x-turndown>

Richard Deeming

Only one of your draggable elements has an id. For any of the others, you set the dataTransfer data to an undefined value. When you drop that, you call getElementById(undefined), which returns null. You then pass null to appendChild, which throws the error. Add a unique id to every element you want to drag, and validate the element when you drop it.

let uid = 0;

function drag(ev) {
const id = e.target.id;
if (!id) {
id = `_auto_generated_id_${uid}`;
e.target.id = id;
uid++;
}

ev.dataTransfer.setData("text", id);
console.debug("drag", e.target, id);

}

function drop(ev) {
ev.preventDefault();

const id = ev.dataTransfer.getData("text");
if (!id) {
    console.warn("Drop with no ID", ev.dataTransfer);
    return;
}

const element = document.getElementById(id);
if (!element) {
    console.warn("Element not found", id);
    return;
}

ev.target.appendChild(element);

}

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

VernonM

Richard Thank you very much... Ah yes , id="" . Originally , I used this code:

var container = document.querySelector("#itemContainer");
var activeItem = null;

var active = false;

container.addEventListener("touchstart", dragStart, false);
container.addEventListener("touchend", dragEnd, false);
container.addEventListener("touchmove", drag, false);

container.addEventListener("mousedown", dragStart, false);
container.addEventListener("mouseup", dragEnd, false);
container.addEventListener("mousemove", drag, false);

function dragStart(e) {

  if (e.target !== e.currentTarget) {
    active = true;

    // this is the item we are interacting with
    activeItem = e.target;

    if (activeItem !== null) {
      if (!activeItem.xOffset) {
        activeItem.xOffset = 0;
      }

      if (!activeItem.yOffset) {
        activeItem.yOffset = 0;
      }

      if (e.type === "touchstart") {
        activeItem.initialX = e.touches\[0\].clientX - activeItem.xOffset;
        activeItem.initialY = e.touches\[0\].clientY - activeItem.yOffset;
      } else {
        console.log("Dragging something!");
        activeItem.initialX = e.clientX - activeItem.xOffset;
        activeItem.initialY = e.clientY - activeItem.yOffset;
      }
    }
  }
}

function dragEnd(e) {
  if (activeItem !== null) {
    activeItem.initialX = activeItem.currentX;
    activeItem.initialY = activeItem.currentY;
  }

  active = false;
  activeItem = null;
}

function drag(e) {
  if (active) {
    if (e.type === "touchmove") {
      e.preventDefault();

      activeItem.currentX = e.touches\[0\].clientX - activeItem.initialX;
      activeItem.currentY = e.touches\[0\].clientY - activeItem.initialY;
    } else {
      activeItem.currentX = e.clientX - activeItem.initialX;
      activeItem.currentY = e.clientY - activeItem.initialY;
    }

    activeItem.xOffset = activeItem.currentX;
    activeItem.yOffset = activeItem.currentY;

    setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
  }
}

function setTranslate(xPos, yPos, el) {
  el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}

But the Cursor keeps loosing the Target , as you can view here , https