Hello ,
Ah , finally getting somewhere .
https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder.html
1 Like
Really nice! Is the plan to eventually be able to play sound based on where the various notes are placed? 
No it’s a project I volunteered to do for these folks:
https://www.facebook.com/groups/1446465172354865
This is my first go-around:
https://www.vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder.html
But it is too finicky , keeps loosing the note , so users have to Drag ultra slow .
So I am working on a (hopefully) faster version .
But It’s a very slow process , here is where I am currently ;
https://www.vmars.us/Guitar/10-CIRCLES-1-IMAGE-CREATE-ELEMENTS-ondragover-Prob.html
and here ;
https://forum.kirupa.com/t/need-help-with-error-insertbefore-on-node-parameter-2-is-not-of-type-node/656450/5
The odd behavior of your drag is because you have attached the event listeners for it to the elemContainer. So what this means is that the drag will only work within that element and its children. The fret board (is that what its called?) is outside of this and doesnt have the events attached to it, so once you drag the thing into that area the only place that the events are still active on are the things as they are children of that element. Thats why if you drag the thing to fast in that area (fret board) you loose a connection with it. So if your mouse movement was slow enough that before the next screen update your mouse stayed within the thing it will move that much but if your mouse lands outside the thing it looses the connection as there are no events attached to that element and the fret board is above the elemContainer so its events win out. Hope that makes some sense.
To fix it you can either attach the events to the body of the page and due to the way your code is it should work (didnt test it). The other way is to rearrange your html to that the elemContainer is declared after the fret board. This will make it above the fret board and as it covers nearly the whole page it will work almost everywhere on the page. You can test this now by opening your page, go to developer console, go to inspector and drag the imageContainer above the elemContainer…you should now be able to drag it fast all over the place.
1 Like
Hi PAEz
Here are the things I tried:
document.body..addEventListener("touchstart", dragStart, false);
document.body..addEventListener("touchend", dragEnd, false);
document.body.addEventListener("touchmove", drag, false);
document.body.addEventListener("mousedown", dragStart, false);
document.body.addEventListener("mouseup", dragEnd, false);
document.body.addEventListener("mousemove", drag, false);The result was still Finicky behavior .
So I tried this:
body , #myBody{}
.
.
const bodyElement = document.getElementById("myBody");
bodyElement.addEventListener("mousedown", dragStart, false);
bodyElement.addEventListener("mouseup", dragEnd, false);
bodyElement.addEventListener("mousemove", drag, false);But I get this ERROR:
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
at Guitar-Scales-and-Boxes-Builder-Body-Listener.html:534:13line 543 is this:
bodyElement.addEventListener(“mousedown”, dragStart, false);
What did I do wrong ?
Thanks
Im sorry mate but as I said it like said I didnt test anything and it just occurred to me why this might have happened…damn css details, Im not that knowledgeable on the details of css I like JS. Its 5 in the morning here right now but tomorrow Ill do some more tests and research and figure it out. Ive been looking at drag all this week on and off and I want to get this down.
1 Like
Great Thanks .
I’ll be trying out some stuff also 
Are you from Australia ?
Yep, Im from Australia.
Sorry I didnt get a chance to look at your stuff today, pretty tired from last night. Will get to it soon.
Ok , Thanks
Yep , you are so right:
Moving image up into elemContainer did solve the odd behavior , can now Drag fast .
But why can’t I Drop on image itself ?
Here is image definition:
<div id="imageContainer" style=" position: absolute ; top:200px; left:54px; ">
<img id="image1" ondragover="DragEnd(e)" style=" z-index:0; width:1340px; height:284px; " src="http://vmars.us/Guitar/FretBoard-Black-White-1048x222.png">
</div> <!-- id="imageContainer" -->What am I doing wrong to cause that ?
<!DOCTYPE html>
<!-- saved from url=(0100)file:///C:/2023-Drag-Drop-AnyWhere/TRY-THIS/10-CIRCLES-1-IMAGE-CREATE-ELEMENTS-querySelectorAll.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
file:///C:/2023-Drag-Drop-AnyWhere/TRY-THIS/2-CIRCLES-1-IMAGE-CREATE-ELEMENTS-ondragover-Prob.html
<!-- http://vmars.us/Guitar/2-CIRCLES-1-IMAGE-CREATE-ELEMENTS-ondragover-Prob.html -->
</title>
<style>
body {
margin: 20px;
background-color: white;
}
#elemContainer {
width: 600px;
height: 400px;
// background-color: #333;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 7px;
touch-action: none;
float: left;
}
.item {
display: flex;
border-radius: 50%;
touch-action: none;
user-select: none;
width: 32px;
height: 32px;
// background-color: #F5F5F5; // whitesmoke
font-family: Arial, Helvetica, sans-serif;
text-align:center;
font-size:26px;
z-index: 8;
}
.item , #elem1{
top: 250px;
width: 28px;
width: 28px;
z-index: 1000;
float: left;
}
.item , #elem2 {
width: 28px;
width: 28px;
z-index: 500;
top: 250px;
float: left;
}
#image1 {
z-index:0;
}
.button { border: none; }
#button1 { border: none; background-color: #636363; color: #FFFFFF}
#button2 { border: none; background-color: #CFD7E4;}
#button3 { border: none; background-color: #E3E3E3; ;}
#button4 { border: none; background-color: #FFFBEF;}
#button5 { border: none; background-color: #FFFBA7;}
#hr02 {
display = "block";
}
/*
.item:active {
opacity: .75;
}
*/
.item:hover {
cursor: pointer;
}
h1 {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h4>http://vmars.us/Guitar/2-CIRCLES-1-IMAGE-CREATE-ELEMENTS-ondragover-Prob.html</h4>
<div id="elemContainer" style="position: absolute; width: 1420px; height: 750px; display:inline-block; ">
<br>
<div class="item" id="elem1" style=" position: relative; float:left; left: 30%; top:0; background-color: #FF0004;"> 1</div>
<!-- -->
<div class="item" id="elem2" style=" position: relative; float:left; left: 31%; top: 0; background-color: #FE8E05;"> 2</div>
<!-- -->
<br><br><br>
<div style="height:25px;">
<hr id="hr01">
<div id="elem21" class="item" style="z-index: 402; border-radius: 50%; left: 100px; background-color: rgb(255, 0, 4);"> 1</div>
<div id="elem22" class="item" style="z-index: 403; border-radius: 50%; left: 130px; background-color: rgb(254, 142, 5);"> 2</div>
<hr id="hr02" style="left:0px; display:none;">
</div>
</div> <!-- id="elemContainer" </div> id="outerContainer" -->
<br>
<div id="imageContainer" style=" position: absolute ; top:200px; left:54px; ">
<img id="image1" ondragover="DragEnd(e)" style=" z-index:0; width:1340px; height:284px; " src="http://vmars.us/Guitar/FretBoard-Black-White-1048x222.png">
</div> <!-- id="imageContainer" -->
<div style=" background-color: white; width: 240px; position: absolute ; top: 520px; Left:550px;">
<div style="background-color: white; width: 300x;">
<button class="button" id="button1" onclick="button1Clicked()">Color</button>
<button class="button" id="button2" onclick="button2Clicked()">Color</button>
<button class="button" id="button3" onclick="button3Clicked()">Color</button>
<button class="button" id="button4" onclick="button4Clicked()">Color</button>
<button class="button" id="button5" onclick="button5Clicked()">Color</button>
</div>
</div>
<p id="notes" contenteditable="true" style=" display: block;
height: 150px; width: 1200px; border-color: red; position: absolute ; top: 580px; left: 55px;
border-width: 2px; border-style: solid; border-color: green; ">Notes:
</p>
<p class="item" onclick="alertHelp()" style=" position: absolute; top: 570px; width: 32px; left: 1280px;
background-color: #FFFF0D; display: block; ">? </p>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
</script>
<script>
function button1Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#636363" ;
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
/*
var elements = document.getElementsByClassName("pearlFret")
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "#FFFBA7"
}
*/
}
</script>
<script>
function button2Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#CFD7E4"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
}
</script>
<script>
function button3Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#E3E3E3"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
}
</script>
<script>
function button4Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#FFFBEF"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
}
</script>
<script>
function button5Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#FFFBA7"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
}
</script>
<script>
function alertHelp() {
var newLine = "\r"
var msg = "SLOWLY DRAG Circles onto Fretboard , Click Circle to Drop."
msg += newLine;
msg += "You can Download your Design , and Browser will keep everything in place!";
msg+= newLine;
msg += " ";
msg += newLine;
msg += "Check out Chrome Extension 'Take Webpage ScreenShots' for Capturing your Designs.";
msg+= newLine;
msg += " ";
msg+= newLine;
msg += "At 'https://www.portablefreeware.com/' you can download lots of Freeware:";
msg+= newLine;
msg += " ";
msg+= newLine;
msg += "Screenshot Captor: https://www.portablefreeware.com/index.php?id=2412";
msg+= newLine;
msg += "It takes good snapshots for Selected Regions.";
msg+= newLine;
msg += " ";
msg+= newLine;
msg += "IrfanView: https://www.portablefreeware.com/index.php?id=49";
msg+= newLine;
msg += "Your ScreenShots will be quite Large.";
msg+= newLine;
msg += "Irfanview can Resize these to a much smaller image.";
msg+= newLine;
msg += "Have Fun !";
alert(msg);
}
</script>
<script>
// document.addEventListener("click", showMe(event));
function showMe(event) {
let X = event.screenX;
let Y = event.screenY;
let result = document.getElementById("result");
result.innerHTML = "<b>X-coordinate: </b>" + X + "<br><b>Ycoordinate: </b>: " + Y;
}
</script>
<script>
var elemContainer = document.querySelector("#elemContainer");
var activeItem = null;
var active = false;
if (elemContainer) {
elemContainer.addEventListener("touchstart", dragStart, false);
elemContainer.addEventListener("touchend", dragEnd, false);
elemContainer.addEventListener("touchmove", drag, false);
elemContainer.addEventListener("mousedown", dragStart, false);
elemContainer.addEventListener("mouseup", dragEnd, false);
elemContainer.addEventListener("mousemove", drag, false);
}
function dragStart(e) {
holdID = event.target.id
if (holdID == "elem1" || holdID == "elem2" || holdID == "elem3" || holdID == "elem4" || holdID == "elem5"
|| holdID == "elem6" || holdID == "elem7" || holdID == "elem8" || holdID == "elem9" || holdID == "elem10")
{ console.log("NOPE , " + holdID + " Cannot Drag !") ;
return ;
}
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("doing something!");
activeItem.initialX = e.clientX - activeItem.xOffset;
activeItem.initialY = e.clientY - activeItem.yOffset;
}
}
}
}
function dragEnd(e) {
console.log("function dragEnd(e)") ;
if (activeItem !== null) {
activeItem.initialX = activeItem.currentX;
activeItem.initialY = activeItem.currentY;
}
active = false;
activeItem = null;
}
function cloneDragEnd(e) {
console.log("function cloneDragEnd(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)";
}
</script>
<script>
var catchFirstTimeThru = 0 ;
var elemNumber = 1;
var elemName ;
var NodeName ;
var leftPosition = 70 ;
var inComingID ;
var outGoingID ;
// =================================================
document.addEventListener('contextmenu', fireContextMenu);
// This function will be called whenever contextmenu event occurs
function fireContextMenu(event) {
event.preventDefault();
inComingID = event.target.id ;
if (inComingID == "elem1" || inComingID == "elem2" || inComingID == "elem3" || inComingID == "elem4" || inComingID == "elem5"
|| inComingID == "elem6" || inComingID == "elem7" || inComingID == "elem8" || inComingID == "elem9" || inComingID == "elem10")
{ console.log("Yep , " + inComingID + " is Clone-able !") ;
}else{
console.log("NOPE , " + inComingID + " is NOT Clone-able !") ;
return ;
}
// Name a New Element
outGoingID = 'elem2' + elemNumber;
elemNumber = elemNumber + 1
//elemName = elemName + elemNumber ;
console.log("outGoingID = " + outGoingID)
console.log("elemNumber = " + elemNumber) ;
newElement = document.createElement("div");
newElement.style.zIndex = elemNumber + 400 ;
newElement.style.borderRadius = "50%" ;
newElement.id = outGoingID ;
newElement.className = "item" ;
leftPosition = leftPosition + 30 ;
newElement.style.left = leftPosition + "px" ;
if (inComingID == "elem1") {newElement.innerHTML = " 1";
newElement.style.backgroundColor = "#FF0004" ;}
if (inComingID == "elem2") {newElement.innerHTML = " 2";
newElement.style.backgroundColor = "#FE8E05" ;}
if (inComingID == "elem8") {newElement.innerHTML = " â™";}
if (inComingID == "elem9") {newElement.innerHTML = " â™®";}
if (inComingID == "elem10") {newElement.innerHTML =" #";}
// Inject it into the DOM
var x = document.querySelectorAll("hr");
NodeName = x[1]; // there are only 2 <hr>s
NodeName.parentNode.insertBefore(newElement, NodeName); // line # 381
}
/*
if(holdID == "elem1"){elemBgColor = "background-color: #FF0004;" }
if(holdID == "elem2"){elemBgColor = "background-color:#FE8E05;" }
//console.log(elemBgColor + " " + floatLeft) ;
//newElement.style.background-color = elemBgColor;
//newElement.style.float = floatLeft;
//newElement.draggable = 'true'; // 150
//newElement.onclick = "helloConsole()"
*/
</script>
</body></html>Thanks
I just swapped over the position of the elem and image containers like I suggested above, seems to work 
Sorry bout the late reply.
<!DOCTYPE html>
<!-- saved from url=(0100)file:///C:/2023-Drag-Drop-AnyWhere/TRY-THIS/10-CIRCLES-1-IMAGE-CREATE-ELEMENTS-querySelectorAll.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
file:///C:/2023-Drag-Drop-AnyWhere/TRY-THIS/2-CIRCLES-1-IMAGE-CREATE-ELEMENTS-ondragover-Prob.html
<!-- http://vmars.us/Guitar/2-CIRCLES-1-IMAGE-CREATE-ELEMENTS-ondragover-Prob.html -->
</title>
<style>
body {
margin: 20px;
background-color: white;
}
#elemContainer {
width: 600px;
height: 400px;
// background-color: #333;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 7px;
touch-action: none;
float: left;
}
.item {
display: flex;
border-radius: 50%;
touch-action: none;
user-select: none;
width: 32px;
height: 32px;
// background-color: #F5F5F5; // whitesmoke
font-family: Arial, Helvetica, sans-serif;
text-align:center;
font-size:26px;
z-index: 8;
}
.item , #elem1{
top: 250px;
width: 28px;
width: 28px;
z-index: 1000;
float: left;
}
.item , #elem2 {
width: 28px;
width: 28px;
z-index: 500;
top: 250px;
float: left;
}
#image1 {
z-index:0;
}
.button { border: none; }
#button1 { border: none; background-color: #636363; color: #FFFFFF}
#button2 { border: none; background-color: #CFD7E4;}
#button3 { border: none; background-color: #E3E3E3; ;}
#button4 { border: none; background-color: #FFFBEF;}
#button5 { border: none; background-color: #FFFBA7;}
#hr02 {
display = "block";
}
/*
.item:active {
opacity: .75;
}
*/
.item:hover {
cursor: pointer;
}
h1 {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h4>http://vmars.us/Guitar/2-CIRCLES-1-IMAGE-CREATE-ELEMENTS-ondragover-Prob.html</h4>
<div id="imageContainer" style=" position: absolute ; top:200px; left:54px; ">
<img id="image1" ondragover="DragEnd(e)" style=" z-index:0; width:1340px; height:284px; " src="http://vmars.us/Guitar/FretBoard-Black-White-1048x222.png">
</div> <!-- id="imageContainer" -->
<br>
<div id="elemContainer" style="position: absolute; width: 1420px; height: 750px; display:inline-block; ">
<div class="item" id="elem1" style=" position: relative; float:left; left: 30%; top:0; background-color: #FF0004;"> 1</div>
<!-- -->
<div class="item" id="elem2" style=" position: relative; float:left; left: 31%; top: 0; background-color: #FE8E05;"> 2</div>
<!-- -->
<br><br><br>
<div style="height:25px;">
<hr id="hr01">
<div id="elem21" class="item" style="z-index: 402; border-radius: 50%; left: 100px; background-color: rgb(255, 0, 4);"> 1</div>
<div id="elem22" class="item" style="z-index: 403; border-radius: 50%; left: 130px; background-color: rgb(254, 142, 5);"> 2</div>
<hr id="hr02" style="left:0px; display:none;">
</div>
</div> <!-- id="elemContainer" </div> id="outerContainer" -->
<div style=" background-color: white; width: 240px; position: absolute ; top: 520px; Left:550px;">
<div style="background-color: white; width: 300x;">
<button class="button" id="button1" onclick="button1Clicked()">Color</button>
<button class="button" id="button2" onclick="button2Clicked()">Color</button>
<button class="button" id="button3" onclick="button3Clicked()">Color</button>
<button class="button" id="button4" onclick="button4Clicked()">Color</button>
<button class="button" id="button5" onclick="button5Clicked()">Color</button>
</div>
</div>
<p id="notes" contenteditable="true" style=" display: block;
height: 150px; width: 1200px; border-color: red; position: absolute ; top: 580px; left: 55px;
border-width: 2px; border-style: solid; border-color: green; ">Notes:
</p>
<p class="item" onclick="alertHelp()" style=" position: absolute; top: 570px; width: 32px; left: 1280px;
background-color: #FFFF0D; display: block; ">? </p>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
</script>
<script>
function button1Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#636363" ;
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
/*
var elements = document.getElementsByClassName("pearlFret")
for (var i = 0; i < elements.length; i++) {
elements[i].style.backgroundColor = "#FFFBA7"
}
*/
}
</script>
<script>
function button2Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#CFD7E4"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
}
</script>
<script>
function button3Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#E3E3E3"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
}
</script>
<script>
function button4Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#FFFBEF"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
}
</script>
<script>
function button5Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#FFFBA7"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"
}
</script>
<script>
function alertHelp() {
var newLine = "\r"
var msg = "SLOWLY DRAG Circles onto Fretboard , Click Circle to Drop."
msg += newLine;
msg += "You can Download your Design , and Browser will keep everything in place!";
msg+= newLine;
msg += " ";
msg += newLine;
msg += "Check out Chrome Extension 'Take Webpage ScreenShots' for Capturing your Designs.";
msg+= newLine;
msg += " ";
msg+= newLine;
msg += "At 'https://www.portablefreeware.com/' you can download lots of Freeware:";
msg+= newLine;
msg += " ";
msg+= newLine;
msg += "Screenshot Captor: https://www.portablefreeware.com/index.php?id=2412";
msg+= newLine;
msg += "It takes good snapshots for Selected Regions.";
msg+= newLine;
msg += " ";
msg+= newLine;
msg += "IrfanView: https://www.portablefreeware.com/index.php?id=49";
msg+= newLine;
msg += "Your ScreenShots will be quite Large.";
msg+= newLine;
msg += "Irfanview can Resize these to a much smaller image.";
msg+= newLine;
msg += "Have Fun !";
alert(msg);
}
</script>
<script>
// document.addEventListener("click", showMe(event));
function showMe(event) {
let X = event.screenX;
let Y = event.screenY;
let result = document.getElementById("result");
result.innerHTML = "<b>X-coordinate: </b>" + X + "<br><b>Ycoordinate: </b>: " + Y;
}
</script>
<script>
var elemContainer = document.querySelector("#elemContainer");
var activeItem = null;
var active = false;
if (elemContainer) {
elemContainer.addEventListener("touchstart", dragStart, false);
elemContainer.addEventListener("touchend", dragEnd, false);
elemContainer.addEventListener("touchmove", drag, false);
elemContainer.addEventListener("mousedown", dragStart, false);
elemContainer.addEventListener("mouseup", dragEnd, false);
elemContainer.addEventListener("mousemove", drag, false);
}
function dragStart(e) {
holdID = event.target.id
if (holdID == "elem1" || holdID == "elem2" || holdID == "elem3" || holdID == "elem4" || holdID == "elem5"
|| holdID == "elem6" || holdID == "elem7" || holdID == "elem8" || holdID == "elem9" || holdID == "elem10")
{ console.log("NOPE , " + holdID + " Cannot Drag !") ;
return ;
}
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("doing something!");
activeItem.initialX = e.clientX - activeItem.xOffset;
activeItem.initialY = e.clientY - activeItem.yOffset;
}
}
}
}
function dragEnd(e) {
console.log("function dragEnd(e)") ;
if (activeItem !== null) {
activeItem.initialX = activeItem.currentX;
activeItem.initialY = activeItem.currentY;
}
active = false;
activeItem = null;
}
function cloneDragEnd(e) {
console.log("function cloneDragEnd(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)";
}
</script>
<script>
var catchFirstTimeThru = 0 ;
var elemNumber = 1;
var elemName ;
var NodeName ;
var leftPosition = 70 ;
var inComingID ;
var outGoingID ;
// =================================================
document.addEventListener('contextmenu', fireContextMenu);
// This function will be called whenever contextmenu event occurs
function fireContextMenu(event) {
event.preventDefault();
inComingID = event.target.id ;
if (inComingID == "elem1" || inComingID == "elem2" || inComingID == "elem3" || inComingID == "elem4" || inComingID == "elem5"
|| inComingID == "elem6" || inComingID == "elem7" || inComingID == "elem8" || inComingID == "elem9" || inComingID == "elem10")
{ console.log("Yep , " + inComingID + " is Clone-able !") ;
}else{
console.log("NOPE , " + inComingID + " is NOT Clone-able !") ;
return ;
}
// Name a New Element
outGoingID = 'elem2' + elemNumber;
elemNumber = elemNumber + 1
//elemName = elemName + elemNumber ;
console.log("outGoingID = " + outGoingID)
console.log("elemNumber = " + elemNumber) ;
newElement = document.createElement("div");
newElement.style.zIndex = elemNumber + 400 ;
newElement.style.borderRadius = "50%" ;
newElement.id = outGoingID ;
newElement.className = "item" ;
leftPosition = leftPosition + 30 ;
newElement.style.left = leftPosition + "px" ;
if (inComingID == "elem1") {newElement.innerHTML = " 1";
newElement.style.backgroundColor = "#FF0004" ;}
if (inComingID == "elem2") {newElement.innerHTML = " 2";
newElement.style.backgroundColor = "#FE8E05" ;}
if (inComingID == "elem8") {newElement.innerHTML = " â™";}
if (inComingID == "elem9") {newElement.innerHTML = " â™®";}
if (inComingID == "elem10") {newElement.innerHTML =" #";}
// Inject it into the DOM
var x = document.querySelectorAll("hr");
NodeName = x[1]; // there are only 2 <hr>s
NodeName.parentNode.insertBefore(newElement, NodeName); // line # 381
}
/*
if(holdID == "elem1"){elemBgColor = "background-color: #FF0004;" }
if(holdID == "elem2"){elemBgColor = "background-color:#FE8E05;" }
//console.log(elemBgColor + " " + floatLeft) ;
//newElement.style.background-color = elemBgColor;
//newElement.style.float = floatLeft;
//newElement.draggable = 'true'; // 150
//newElement.onclick = "helloConsole()"
*/
</script>
</body></html>
Oh, Thank you very much !!!
Sorry I misunderstood your directions .
AND yours is Quite Fast , just like I needed .
Eventually it will look like This only Faster:
https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder.html
