Need drop(event) Help...

vmars316 · December 20, 2022

Hello & TIA ,

So far I am unable make drop(event) work :

What am I doing wrong ?

The original code is 600 + lines , so I have chunked down to this :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>Guitar-Scales-and-Boxes-Builder-1-Note-4-Frets-CLONE.html</title>

<style>
body {
      margin: 20px;
      background-color: #FFFFFF;
    }
.flex-container {
  display: flex;
}

.flex-container > div {
  font-size: 20px;
}

#outerContainer{ border: 5px solid red;
}
    #itemContainer {
      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;
    }
	
.dragItems {   } 
#tableContainer {    }

#fretboardContainer { background-color: #DCDCDC;  // #000000;  // #636363;   // #DCDCDC;  // #FFFBA7
}
.pearlFret { background-color:#6363FF;
}
tbody { background-color:#636363;
}
.button { border: none; }
#button1 { border: none; background-color: #636363; color: #FFFFFF} /*darkGrey  OR  LightGrey  @DCDCDC */

#tbodyId { background-color:#636363;
}
   .item:active {
      opacity: .75;
    }
    .item:hover {
      cursor: pointer;
    }
  </style>
</head>

<body onload="button1Clicked()">

<div id="outerContainer"    style="border:4px;"  ondrop="drop(event)" ondragover="allowDrop(event)" >  <!--  BEGIN OF id="outerContainer ZZZZZZZZZZZZZZZZZZZZZZZ       position: absolute;   border: 2px;                                         -->

<p>
  X: <span id="x"></span><br>
  Y: <span id="y"></span>  <!--   ondrop="drop(event)" ondragover="allowDrop(event)"  -->
</p>

<div id="itemContainer"   id="dragItems" class="flex-container"; class="POS"  style="  position: absolute;  top: 40px; ">  
  <div class="item" class="flatOne"       draggable="true" ondragstart="drag(event)"  style=" position: absolute;  left: 100px; top: 0; background-color: yellow;" >b1</div>   
  <div class="item" class="one"            draggable="true" ondragstart="drag(event)"  style="  position: absolute; left: 400px; top: 0; background-color: #FF0004;" > 1</div>   
  <div class="item" class="sharpOne"    draggable="true" ondragstart="drag(event)"  style=" position: absolute; left:  700px; top: 0;  background-color: yellow;" >♯1</div>   
  <div class="item" class="naturalOne"  draggable="true" ondragstart="drag(event)"  style=" position: absolute; left: 1000px; top: 0; ; background-color: yellow;" >♮1</div>   
</div>   <!--  id="itemContainer"  --> 

<div id="tableContainer" style="  position: absolute;  top: 155px; left: 55px; ">  <!--   id="tableContainer" ZZZZZZZZZZZZZZZ   -->
<table   id="fretboardContainer"  ondrop="drop(event)" ondragover="allowDrop(event)"  style=" position: absolute ; width: 1200px;">   <!--  <p> BEGIN OF  fretContainer   ZZZZZZZZZZZZ  -->
<!--  Start Copy Here  -->
<tbody id="tbodyId" style="background-color:#636363;" >
<tr style="height: 40px; border-bottom: 2px solid red;  border-top: 3px solid white;">  
<!-- Row 1  -->
<td style="vertical-align: top; border-bottom: 3px solid white;  border-top: 4px solid white;"><br>
</td>
<td style="vertical-align: top; border-bottom: 2px solid white;  border-top: 4px solid white;"><br>
</td>
<td style="vertical-align: top; border-bottom: 2px solid white;  border-top: 4px solid white;"><br> 
</td>
<td style="vertical-align: top; border-bottom: 2px solid white;  border-top: 4px solid white;"><br>
</td>
</tr>
</tbody>
</table>  <!--  <p> END OF  fretContainer   ZZZZZZZZZZZZZZZZZZZZZZZ  </p>  -->

</div>  <!--  <p> END OF  tableContainer   ZZZZZZZZZZZZZZZZZZZZZZZ  </p>  -->


<div id="buttonContainer" style=" background-color: white; width: 240px;  position: absolute ;  top: 455px; Left:550px;">

<div style="background-color: white; width: 340px;">
<button class="button"  id="button1" onclick="button1Clicked()">Color</button>
<button class="button"  id="button2" onclick="button2Clicked()">Color</button>
</div>
</div>  <!--  id="buttonContainer"  -->

<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>

</div> <!--  <p> END OF id="outerContainer ZZZZZZZZZZZZZZZZZZZZZZZ  </p>  -->

<!--  <p>  BEGIN SCRIPT  ZZZZZZZZZZZZZZZZZ  </p>  -->

<script>
window.addEventListener('mousemove', (event) => {
  let x = event.clientX;
  let y = event.clientY;

  document.getElementById('x').innerHTML = x;
  document.getElementById('y').innerHTML = y;
});
</script>

<script>
function button1Clicked() {
//document.body.style.backgroundColor = "red";
document.getElementById("tbodyId").style.backgroundColor =  "#636363" ;
// document.getElementById("fretboardContainer").style.backgroundColor = "#DCDCDC"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"

    var elements = document.getElementsByClassName("pearlFret")
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.backgroundColor =  "#636363" ;                      // "#333333";
  }
}
</script>

<script>
function button2Clicked() {
document.getElementById("tbodyId").style.backgroundColor = "#CFD7E4"
document.getElementById("fretboardContainer").style.backgroundColor = "#000000"

    var elements = document.getElementsByClassName("pearlFret")
        for (var i = 0; i < elements.length; i++) {
            elements[i].style.backgroundColor = "#CFD7E4"         //  "#595959";
  }
}
</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>
 function allowDrop(event) {
	event.preventDefault();
}

function drag(event) {
	event.dataTransfer.setData("text", event.target.id);
}

function drop(event) {
	event.preventDefault();
	var data = event.dataTransfer.getData("text");
	event.target.appendChild(document.getElementById(data));
}

 </script>
 

</body>
</html>

Sign In

Need drop(event) Help...

Recommended Posts

vmars316

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity