how to modify cloned element draggable attribute ?
-
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 & 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: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: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)
-
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: 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 .