DnD How to Force Clone Independant Behavior ?

vmars316 · January 23, 2023, 2:57pm

Thanks for your Help…
I’m Having two MAJOR problems:

( https://vmars.us/Guitar/10-CIRCLES-ONLY-FRETBOARD-1-IMAGE.html )

(Cloning works fine) BUT as you can see in this video

( https://vmars.us/Guitar/DnD-New-Clone-Moves-All-Clones.mp4 )

When I Clone note-1 and position it ,
and then make a newClone , the newClone causes note-1-Clone to ‘move out of position’ .
And every time thereafter , making a newClone
causes all notes on the FretBoard to be pushed ‘out of position’ .
How can I STOP this linked-behavior .

The Drag-Clone works nice and fast , like your Code .
EXCEPT when I Drag-Clone over the FretBoard ,
then the Drag-behavior becomes becomes erratic/finicky
and the Clone gets lost , drops off from Cursor .
This finicky behavior

( https://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder.html )

is what motivated me to launch a whole new approach , using Clones and Images .
Seems I have wasted a whole month on this .

How can I STOP this erratic behavior .

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
https://vmars.us/Guitar/10-CIRCLES-ONLY-FRETBOARD-1-IMAGE.html
</title>

<style>
    body {
      margin: 20px;
	  background-color: black;
    }

#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;
/*      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:26px;
	  z-index: 8;
    }

#elem1{
  top: 250px;
  width: 28px;
  width: 28px;
  z-index: 1000;
  float: left;
  }

#elem2 {
  width: 28px;
  width: 28px;
  z-index: 500;
  top: 250px;
  float: left;
  }

#elem3 {
  width: 28px;
  width: 28px;
  z-index: 500;
  top: 250px;
  float: left;
}

#elem4 {
  width: 28px;
  width: 28px;
  z-index: 500;
  top: 250px;
  float: left;
}

#elem5 {
  width: 28px;
  width: 28px;
  z-index: 500;
  top: 250px;
  float: left;
}

#elem6 {
  width: 28px;
  width: 28px;
  z-index: 500;
  top: 250px;
  float: left;
}

#elem7 {
  width: 28px;
  width: 28px;
  z-index: 500;
  top: 250px;
  float: left;
}

.accidental , #elem8 {
    width: 28px;
    height:28px;
  z-index: 250;
  top: 250px;
  float: left;
}

.accidental , #elem9 {
    width: 28px;
    height:28px;
  top: 250px;
  float: left;
}

accidental , #elem10 {
    width: 28px;
    height:28px;
  z-index: 250;
  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;} 

hr , #hr01 {

}
/*
    .item:active {
      opacity: .75;
    }
*/

    .item:hover {
      cursor: pointer;
    }
    
    h1 {
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
<!--
<div id="outerContainer">
-->

<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;" >&nbsp;1</div>
<!--    -->
  <div class="item" id="elem2"   style=" position: relative;   float:left; left: 31%;  top: 0; background-color: #FE8E05;" >&nbsp;2</div>
<!--    -->
  <div class="item"  id="elem3"  style=" position: relative;   float:left; left: 32%;  top: 0; background-color: #FFFF0D;" >&nbsp;3</div>
<!--    -->
  <div class="item"  id="elem4"  style=" position: relative;    float:left; left: 33%;  top: 0; background-color: #0CB051;" >&nbsp;4</div>
<!--    -->
  <div class="item"  id="elem5"  style=" position: relative;    float:left; left: 34%;   top: 0; background-color: #3F75EC;" >&nbsp;5</div>
<!--    -->
  <div class="item"  id="elem6"  style=" position: relative;    float:left; left: 35%;  top: 0; background-color: #B064EA;" >&nbsp;6</div>
<!--    -->
  <div class="item" id="elem7"   style=" position: relative;    float:left; left: 36%;  top: 0; background-color: #F7A3C1;" >&nbsp;7</div>
<!--    -->
 <div class="item"  id="elem8" class="accidental" style="  position: relative;   float:left; left: 39%;   top: 0; background-color: #DCDCDC;" >&nbsp;♭</div>
<!--    -->
  <div class="item"  id="elem9" class="accidental" style="  position: relative;   float:left; left: 40%;   top: 0;  background-color: #DCDCDC;" >&nbsp;♮</div>
<!--    -->
 <div class="item"  id="elem10" class="accidental" style="  position: relative;   float:left; left: 41%;   top: 0; background-color: #DCDCDC;" >&nbsp;♯</div>
<!--    -->
<br><br><br>
<div style="height:25px;">
<hr id="hr01">
<br>&nbsp;
<hr id="hr02">
</div>

</div>  <!--  id="elemContainer"     </div>   id="outerContainer"  -->
<br>



<br>
</div>  <!--  id="imageContainer"  -->

<div id="imageContainer"  style=" position: absolute ; top:250px; left:54px; ">
      <img id="image1" style="width:1340px; height:284px; " src="https://vmars.us/Guitar/FretBoard-Black-White-1048x222.png">

<div style=" background-color: white; width: 240px;  position: absolute ;  top: 455px; 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: 525px; left: 55px; 
      border-width: 2px;  border-style: solid; border-color: green; " >Notes: 
</p>  
  <p class="item" class="three" onclick="alertHelp()" style=" position: absolute; top: 460px; width: 32px; left: 1280px; 
  background-color: #FFFF0D; display: block; " >? </p>
  
<script>
function draggingOver(event) {
return;
}
</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);
      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 containerK = document.querySelector("#containerK");
    var elemContainer = document.querySelector("#elemContainer");
    var activeItem = null;

    var active = false;
	
if (containerK) {
    containerK.addEventListener("touchstart", dragStart, false);
    containerK.addEventListener("touchend", dragEnd, false);
    containerK.addEventListener("touchmove", drag, false);

    containerK.addEventListener("mousedown", dragStart, false);
    containerK.addEventListener("mouseup", dragEnd, false);
    containerK.addEventListener("mousemove", drag, 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 (clone.id == "elem1" || clone.id == "elem2" || clone.id == "elem3" || clone.id == "elem4" || clone.id == "elem5"
 || clone.id == "elem6" || clone.id == "elem7" || clone.id == "elem8" || clone.id == "elem9" || clone.id == "elem10") 
 { console.log("NOPE ,  " + clone.id + "  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 elemNumber = 1;

var elemBgColor ; //
var floatLeft = "float:left" // 
var clodeId ;
var holdID;
// "background-color:#FF0004;float:left;"
// style="width:170px;height:170px;margin-left:15px;">
//var floatLeft = "clone.style = floatLeft;"

// =================================================

document.addEventListener('contextmenu', fireContextMenu);
	
// This function will be called whenever contextmenu event occurs
function fireContextMenu(event) {
    event.preventDefault();
console.log("function fireContextMenu(event)") ;
holdID = event.target.id
console.log("holdID = " + holdID) ;

// Create a copy of it
var clone = event.target.cloneNode(true);    // 181

clone.addEventListener("dragstart", (event) => { drag(event); });

if (clone.id == "elem1" || clone.id == "elem2" || clone.id == "elem3" || clone.id == "elem4" || clone.id == "elem5"
 || clone.id == "elem6" || clone.id == "elem7" || clone.id == "elem8" || clone.id == "elem9" || clone.id == "elem10") 
 { console.log("Yep ,  " + clone.id + "  is Clone-able !") ;
 }else{
  console.log("NOPE ,  " + clone.id + "  is NOT Clone-able !") ;
  return ;
}

if(clone.id == "elem1"){elemBgColor  =  "background-color: #FF0004;" }
if(clone.id == "elem2"){elemBgColor  =  "background-color:#FE8E05;" }
if(clone.id == "elem3"){elemBgColor  =  ' "background-color: #FFFF0D;' }
if(clone.id == "elem4"){elemBgColor  =  ' "background-color: #0CB051;' }
if(clone.id == "elem5"){elemBgColor  =  ' "background-color: #3F75EC;' }
if(clone.id == "elem6"){elemBgColor  =  ' "background-color: #B064EA;' }
if(clone.id == "elem7"){elemBgColor  =  ' "background-color: #F7A3C1;' }
if(clone.id == "elem8"){elemBgColor  =  ' "background-color: #DCDCDC;' }
if(clone.id == "elem9"){elemBgColor  =  ' "background-color: #DCDCDC;' }
if(clone.id == "elem10"){elemBgColor = ' "background-color: #DCDCDC;' }

//Update the ID and add a class
clone.id = 'elem2' + elemNumber;
console.log("New clone.id = " + clone.id)
//console.log(elemBgColor  + " " + floatLeft) ;
//clone.style.background-color = elemBgColor;
//clone.style.float = floatLeft;
//clone.draggable = 'true';  // 150
//clone.onclick = "helloConsole()"
clone.zIndex = elemNumber;
elemNumber = elemNumber + 1
clone.position = "absolute" ;
// Inject it into the DOM
hr01.after(clone);
//clone.onmouseup(cloneDragEnd()) ;
}
// =================================================
  </script>
</body>
</html>

PAEz · January 23, 2023, 5:23pm

As always, Im not the best at css, Im crap actually, but anywayz…
The reason in 1. for the elements moving after you clone is likely because you are using position:relaitve on your elements. This will make the position of the element relative to the one that came before it, so when you start adding things to the dom you can change what the element is now relative to and things move. It looks like your using it just so you can move an element a bit to the right of the one before it, instead you could use something like a margin/pad (not sure which, Im not that great at css). Those will both basically be ignored once you move the element with a transform.

Whilst Im here, that message in the alert doesnt need all that +“” stuff, look up template literals and use that instead…the can be multiline, no need for the “\r” stuff.

DnD How to Force Clone Independant Behavior ?

Follow:

Popular

Loose Ends