Need help , Having problem with Drag n Drop ?

vmars316 · December 21, 2022

Hello & TIA ,

My code seems quite simple , but I have been hung up for days :

The first DnD doesnt Drop : 'div id="itemContainer" '

Tha 2nd DnD works fine .

<!DOCTYPE HTML>
<html>
<head>
<style>
#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;
//      background-color: #F5F5F5;  //  whitesmoke 
      font-family: Arial, Helvetica, sans-serif;
      text-align:center;
      font-size:28px;
	  z-index: 8;
    }

</style>
</head>
<body>

<h2>Drag and Drop</h2>
<br>
<div id="itemContainer"   id="dragItems"    ondrop="drop(event)"  ondragover="allowDrop(event)" class="POS"  style=" width:100%;  border: thick solid pink;">  
<br>  <div class="item" class="flatOne"  id="flatOne"     draggable="true"   style="  background-color: yellow;" >b1</div>   
<br>  <div class="item" class="one"            draggable="true" ondragstart="drag(event)"  style="  background-color: #FF0004;" > 1</div>   
<br>  <div class="item" class="sharpOne"    draggable="true" ondragstart="drag(event)"  style="  background-color: yellow;" >♯1</div>   
<br>  <div class="item" class="naturalOne"  draggable="true" ondragstart="drag(event)"  style="  background-color: yellow;" >♮1</div>   
</div> 

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img src="RedCircle.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">
</div>

<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<br><br><br><br>

<br>
<div  ondrop="drop(event)" ondragover="allowDrop(event)"  style=" border: thick solid blue; width:100%; height: 200px;">
</div>

<script>
function allowDrop(ev) {
  ev.preventDefault();
  console.log("function allowDrop(ev)")
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
  console.log("function function drag(ev)")
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  console.log("function drop(ev)")
}
</script>

</body>
</html>

Edited December 21, 2022 by vmars316

vmars316 · December 21, 2022

These are the Errors I am getting :

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)

Please see video , it was to large for this Forum .
Please view from my site:
https://vmars.us/ShowMe/Drag-n-Drop.mp4

Thanks for your Help...

Edited December 22, 2022 by vmars316

Sign In

Need help , Having problem with Drag n Drop ?

Recommended Posts

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity