Dragable element gets stuck after inserting second one-CodePudding

Hello I want to learn a bit more about javascript because i'm very new to javascript coding. I'm trying to create a small script that when you press a button a new Dom structure is created and it creates a small structure. so far so good. After this my idea was to let those newly created structures be drageable.

I found some code from w3schools.com to create a dragable div.

now I'm running into a problem. when i create 1 new div structure I can drag this structure all around. after I create a 2nd one my entire javascript code seems to crash because I cannot move both the structures around my screen.

I think it got something to do with the creating of the div and that I name it 'mydiv'. but this is just a guess (like I said i'm very new to Javascript coding)

DIV create code

 
 function createDiv() {
 let dom = '<div id="mydiv"><div id="mydivheader" class = "Filter"><button>test 1</button></div></div>'; 
 
 let template = document.createElement("template");
 template.innerHTML = dom;
 document.body.innerHTML  = template.innerHTML;

 
 }

Dragable code

 dragElement(document.getElementById("mydiv"));

 function dragElement(elmnt) {
   var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
   if (document.getElementById(elmnt.id   "header")) {
     /* if present, the header is where you move the DIV from:*/
     document.getElementById(elmnt.id   "header").onmousedown = dragMouseDown;
   } else {
     /* otherwise, move the DIV from anywhere inside the DIV:*/
     elmnt.onmousedown = dragMouseDown;
   }
 
   function dragMouseDown(e) {
     e = e || window.event;
     e.preventDefault();
     // get the mouse cursor position at startup:
     pos3 = e.clientX;
     pos4 = e.clientY;
     document.onmouseup = closeDragElement;
     // call a function whenever the cursor moves:
     document.onmousemove = elementDrag;
   }
 
   function elementDrag(e) {
     e = e || window.event;
     e.preventDefault();
     // calculate the new cursor position:
     pos1 = pos3 - e.clientX;
     pos2 = pos4 - e.clientY;
     pos3 = e.clientX;
     pos4 = e.clientY;
     // set the element's new position:
     elmnt.style.top = (elmnt.offsetTop - pos2)   "px";
     elmnt.style.left = (elmnt.offsetLeft - pos1)   "px";
   }
 
   function closeDragElement() {
     /* stop moving when mouse button is released:*/
     document.onmouseup = null;
     document.onmousemove = null;
   }
 }

HTML code Note: I added some jqueary scripts and other things like boodstrap in the hopes of getting it to work

<!DOCTYPE html>
<html lang="en">
<head>
  <title>create dragable DOMS</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
 </head>
 <body>
    <div>
        <button  onClick="createDiv()"> create </button>
    </div>
            
<div>

</div>

</body>
<script> see code block </script>

CodePudding user response：

Hey you forgot to add the css for us to see your draggable element !

First of all :

document.body.innerHTML  = template.innerHTML;

Break all listeners when you execute that code , innerHTML parse the html code into string before adding a content and parses again to HTML Objects... losing all events associated in the page ..

So we gonna use :

document.body.appendChild()

Also , the element template doesnt works well for this ! Turns what is inside into document fragment . I'll use div in this example .

let myDiv = document.createElement("div")

Also made an 'counter' for you manage better all this .

See in action :

<!DOCTYPE html>
<html lang="en">
<head>
  <title>create dragable DOMS</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>

  <style>
    #myDiv {
        position: absolute;
        width: 100px;
    }
    #mydivheader {
        background: #9494fd;
    }
    #mydivheader > button {
        margin-top: 20px;
        width: 100%;
    }
  </style>
 </head>
 <body>
    <div>
        <button  onClick="createDiv()"> create </button>
    </div>

</body>
<script>
function createDiv() {
    const counter = document.getElementsByClassName('myDiv').length;
    let dom = '<div id="mydivheader" class = "Filter"><button>test ' counter '</button></div>'; 
    let myDiv = document.createElement("div");
    myDiv.id = 'myDiv';
    myDiv.className = 'myDiv';
    myDiv.innerHTML = dom;
    document.body.appendChild(myDiv);
    myDiv.addEventListener('click', dragElement(myDiv), true);
}

function dragElement(elmnt) {
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
    if (document.getElementById(elmnt.id   "header")) {
        /* if present, the header is where you move the DIV from:*/
        document.getElementById(elmnt.id   "header").onmousedown = dragMouseDown;
    } else {
        /* otherwise, move the DIV from anywhere inside the DIV:*/
        elmnt.onmousedown = dragMouseDown;
    }

    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();
        // get the mouse cursor position at startup:
        pos3 = e.clientX;
        pos4 = e.clientY;
        document.onmouseup = closeDragElement;
        // call a function whenever the cursor moves:
        document.onmousemove = elementDrag;
    }

    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
        elmnt.style.top = (elmnt.offsetTop - pos2)   "px";
        elmnt.style.left = (elmnt.offsetLeft - pos1)   "px";
    }

    function closeDragElement() {
        /* stop moving when mouse button is released:*/
        document.onmouseup = null;
        document.onmousemove = null;
    }
}
</script>