Well friends: Here's what I have so far: https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder-10-Circles-4-Frets-CLONE-RO-WEB.html Now the only thing left to do is be able to Drop anywhere on the page , so I'll start a new Post for Help with that .

Instructions: Go to here: https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html Open up Console Click on the 'b' grey circle Drag the Cloned 'b' grey circle onto the Dark Grey Fretboard . See Errors in Console.log . Thanks These are Errors I am getting . Code:Copy to clipboard Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:169 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at drop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:169:13) at HTMLTableCellElement.ondrop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:108:171) Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:169 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at drop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:169:13) at HTMLDivElement.ondrop (Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html:82:160)

Well Friends: I have made some headway ; Successfully Cloned a 'div' , but now , the function drop(ev) is not working , see here: https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html Any ideas what has gone wrong , Thanks ?

Hello & TIA ; Create a Draggable Clone from id="elem1" , where id="elem1" is draggable="false"; . The coding problem is here : clone.classList.add('draggable="true"') Please What is the proper coding ? Thanks

function cloneElem1(){
// Get the element
var elem = document.querySelector('#elem1');
// Create a copy of it
var clone = elem.cloneNode(true);
// Update the ID and add a class
clone.id = 'elem2' + elemNumber;
elemNumber = elemNumber + 1
clone.classList.add('text-large');
clone.classList.add("draggable='true';")
// Inject it into the DOM
elem.after(clone);
}

********

Guitar-Scales-and-Boxes-Builder-4-Circles-4-Frets-CLONE.html
body {
margin: 20px;
background-color: #FFFFFF;
}
.flex-container {
display: flex;
}
.flex-container > div {
font-size: 20px;
}
#container {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
counter-reset: itemCount;
}
.item {
display: inline-block;
border-radius: 50%;
touch-action: none;
user-select: none;
counter-increment: itemCount;
content: 'count' + itemCount;
width: 32px;
height: 32px;
background-color: #F5F5F5; // whitesmoke
font-family: Arial, Helvetica, sans-serif;
text-align:center;
font-size:28px;
z-index: 8;
}

.flatOne , .sharpOne , .naturalOne { background-color: #DCDCDC;
z-index: 5;
}

td {margin: auto;
}

#elem1 , #elem2 , #elem3 , #elem4(
)
.flatOne , .one , .sharpOne , naturalOne {
}

#itemContainer { }
#tableContainer { }
#fretboardContainer { background-color: #DCDCDC;
}
tbody { background-color:#636363;
}
#tbodyId { background-color:#636363;
}
.item:active {
opacity: .75;
}
.item:hover {
cursor: pointer;
}

X:
Y:

Hello & Thanks : Working-Example here : https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder-1-Note-4-Frets-FORUM.html The working-example is VERY finicky , in that when Dragging an item , the Cursor keeps loosing the item , as you can view at link above , Forcing me to keep going back and Grabbing .item again & again . Else I have to Drag at a sloth's pace . Source-Code :

Guitar-Scales-and-Boxes-Builder-1-Note-4-Frets-FORUM.html
body {
margin: 20px;
background-color: #FFFFFF;
}
.flex-container {
display: flex;
}

.flex-container > div {
font-size: 20px;
}
#container {
width: 100%;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
counter-reset: itemCount;
}
.item {
display: inline-block;
border-radius: 50%;
touch-action: none;
user-select: none;
counter-increment: itemCount;
content: 'count' + itemCount;
width: 32px;
height: 32px;
background-color: #F5F5F5; // whitesmoke
font-family: Arial, Helvetica, sans-serif;
text-align:center;
font-size:28px;
z-index: 8;
}

.flatOne , sharpOne , naturalOne { background-color: #DCDCDC;
z-index: 5;
}

#itemContainer { }
#tableContainer { }
#fretboardContainer { background-color: #DCDCDC;
}
tbody { background-color:#636363;
}
#tbodyId { background-color:#636363;
}
.item:active {
opacity: .75;
}
.item:hover {
cursor: pointer;
}

X:
Y:

b

1

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

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>

Greets, How can I tell programatically, Is gdi+ already started? Is there a function for this? Thanks...vmars316