将 position 设置为绝对的可拖动元素

Question

I have some element that I want to drag on a canvas to return their coordinates thereafter. So elements should appear next to each other than I will be able to drag them. The problem I am facing is the elements appear on each other not separated by space:

I am using the function dragElement(element) from https://www.w3schools.com/howto/howto_js_draggable.asp to make my elements draggable.

 //Make the DIV element draggagle: dragElement(document.getElementById("mydiv")); dragElement(document.getElementById("mydiv2")); 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; } }

 #mydiv, #mydiv2 { position: absolute; z-index: 9; background-color: #f1f1f1; text-align: center; border: 1px solid #d3d3d3; } #mydivheader, #mydivheader2 { padding: 10px; cursor: move; z-index: 10; background-color: #2196F3; color: #fff; }

 <div class="container"> <div id="markers" class="row"> <div id="mydiv" class="col-sm-10"> <div id="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> <div id="mydiv2" class="col-sm-10"> <div id="mydivheader2">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> </div> </div>

I tried to change the CSS position property from absolute to relative, It make elements set next to each other but I can't drag them anymore.

On the code I posted I have only two elements but actually, more new elements will be created dynamically with a JS code.

Here is my JS code:

//this list will be uploaded by the user      
var d = ["module1", "module2",.......,"module22"];

for(i in d){
  append_module_name_to_drag_div(d[i]);
  dragElement(document.getElementById(d[i]));  
}

function append_module_name_to_drag_div(module_name){
  var mydiv = document.createElement("div");
  mydiv.id=module_name;
  mydiv.className ='col-sm-10';

  var mydivmarker= document.createElement("div");
  mydivmarker.id=module_name+"header";
  mydivmarker.className ='mydivheader';
  
  var marker_image = new Image();
  marker_image.src = "http://www.clker.com/cliparts/w/O/e/P/x/i/map-marker-hi.png";
  marker_image.height = 45;
  marker_image.width = 35;
  
  mydivmarker.append(marker_image);
  mydiv.innerHTML=module_name;
  mydiv.append(mydivmarker);
  document.getElementById("markers").appendChild(mydiv);
}

Answer 1

Original w3schools example

You can use position: absolute like mentioned on the linked w3schools example, but without defining top , left etc. for the absolutely positioned elements they all have the same default: top: 0 and left: 0 . Therefor they all appear at the same location, which leads to the stacking on top of each other.

You can prevent the stacking if you define a different value for top , left etc. for each absolutely positioned element. For example:

#mydiv2 {
  top: 170px;
}

This is a solution for your originally posted question with two hardcoded draggable elements, but it doesn't fit well for dynamically added content.

Working example:

For simplicity i omitted the first if... else block in the function dragElement() and attached the event listener directly to the whole element:

elmnt.onmousedown = dragMouseDown;

 //Make the DIV element draggagle: dragElement(document.getElementById("mydiv2")); dragElement(document.getElementById("mydiv")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; 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; } }

 #mydiv, #mydiv2 { position:absolute; z-index: 9; background-color: #f1f1f1; text-align: center; cursor: move; border: 1px solid #d3d3d3; } #mydiv2 { top: 170px; } #mydivheader, #mydivheader2 { padding: 10px; z-index: 10; background-color: #2196F3; color: #fff; }

 <div class="container"> <div class="row"> <div id="mydiv" class="col-sm-10"> <div id="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> <div id="mydiv2" class="col-sm-10"> <div id="mydivheader2">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> </div> </div>

---

Using transform: translate()

Basic implementation

For dynamically added content (or any other reason for not using top , left etc.) it would be better to use transform: translate() and omit position: absolute , so that the elements stay where they are and can't get stacked.

To bring this to work you simply have to subtract the original calculation from the old translate -values, which you overwrite with the values of that subtraction (to save them for the next function call):

pos1 = pos1 - (pos3 - e.clientX);
pos2 = pos2 - (pos4 - e.clientY);

Last you have to change the two lines where the styling occurs from top and left to one line with translate :

elmnt.style.transform = 'translate(' + (pos1) + "px, " + (pos2) + "px)";

Working example:

I exchanged the outdated var with let because the vars will change.

 //Make the DIV element draggagle: dragElement(document.getElementById("mydiv2")); dragElement(document.getElementById("mydiv")); function dragElement(elmnt) { let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; 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 = pos1 - (pos3 - e.clientX); pos2 = pos2 - (pos4 - e.clientY); pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.transform = 'translate(' + (pos1) + "px, " + (pos2) + "px)"; } function closeDragElement() { // stop moving when mouse button is released: document.onmouseup = null; document.onmousemove = null; } }

 #mydiv, #mydiv2 { width: 160px; background-color: #f1f1f1; text-align: center; cursor: move; border: 1px solid #d3d3d3; } #mydivheader, #mydivheader2 { padding: 10px; background-color: #2196F3; color: #fff; }

 <div class="container"> <div class="row"> <div id="mydiv" class="col-sm-10"> <div id="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> <div id="mydiv2" class="col-sm-10"> <div id="mydivheader2">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> </div> </div>

Speaking vars

The names of the vars in the w3schools example pos1, pos2, pos3, pos4 aren't very intuitive. Therefor they should be renamed to easyly understand what they are for: translate = { x: 0, y: 0 } and client = { x: 0, y: 0 } .

Working example:

 //Make the DIV element draggagle: dragElement(document.getElementById("mydiv2")); dragElement(document.getElementById("mydiv")); function dragElement(elmnt) { let translate = { x: 0, y: 0 }; let client = { x: 0, y: 0 }; elmnt.onmousedown = dragMouseDown; function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: client.x = e.clientX; client.y = 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: translate.x = translate.x - (client.x - e.clientX); translate.y = translate.y - (client.y - e.clientY); client.x = e.clientX; client.y = e.clientY; // set the element's new position: elmnt.style.transform = 'translate(' + (translate.x) + "px, " + (translate.y) + "px)"; } function closeDragElement() { // stop moving when mouse button is released: document.onmouseup = null; document.onmousemove = null; } }

 #mydiv, #mydiv2 { width: 160px; border: 1px solid #d3d3d3; text-align: center; cursor: move; background-color: #f1f1f1; } #mydivheader, #mydivheader2 { padding: 10px; background-color: #2196F3; color: #fff; }

 <div class="container"> <div class="row"> <div id="mydiv" class="col-sm-10"> <div id="mydivheader">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> <div id="mydiv2" class="col-sm-10"> <div id="mydivheader2">Click here to move</div> <p>Move</p> <p>this</p> <p>DIV</p> </div> </div> </div>

Final implementation

To demonstrate the code with your later added function for dynamically adding draggable elements, here the final implementation. I exchanged the outdated var with const because the vars won't change.

Working example:

 const d = ["module1", "module2", "module3", "module4", "module5"]; for(i in d) { append_module_name_to_drag_div(d[i]); dragElement(document.getElementById(d[i])); } function append_module_name_to_drag_div(module_name) { const mydiv = document.createElement("div"); mydiv.id = module_name; mydiv.className = 'module col-sm-10'; const mydivmarker = document.createElement("div"); mydivmarker.id = module_name+"header"; mydivmarker.className = 'mydivheader'; const marker_image = new Image(); marker_image.src = "http://www.clker.com/cliparts/w/O/e/P/x/i/map-marker-hi.png"; marker_image.height = 45; marker_image.width = 35; mydivmarker.append(marker_image); mydiv.innerHTML = module_name; mydiv.append(mydivmarker); document.getElementById("markers").appendChild(mydiv); } function dragElement(elmnt) { let translate = { x: 0, y: 0 }; let client = { x: 0, y: 0 }; elmnt.onmousedown = dragMouseDown; function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: client.x = e.clientX; client.y = 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: translate.x = translate.x - (client.x - e.clientX); translate.y = translate.y - (client.y - e.clientY); client.x = e.clientX; client.y = e.clientY; // set the element's new position: elmnt.style.transform = 'translate(' + (translate.x) + "px, " + (translate.y) + "px)"; } function closeDragElement() { // stop moving when mouse button is released: document.onmouseup = null; document.onmousemove = null; } }

 .module { width: 80px; border: 1px solid #d3d3d3; text-align: center; cursor: move; background-color: #f1f1f1; }.mydivheader { padding: 10px; background-color: #2196F3; color: #fff; }

 <div class="container"> <div id="markers" class="row"> </div> </div>

Answer 2

The elements appear on top of each other because your #mydiv has position: absolute declared, which takes it out of the document flow. Elements out of flow will be placed on top of the flowing elements, as specified by CSS.

Greg suggested to use the CSS-function translate() for moving, instead of position: absolute with top etc. This would leave the elements in the flow, meaning they will still be considered.

As translate() will take effect after re-flow (re-validating the flow of the document), it won't mess with your layout even when the draggable elements are moved.

If you're only interested in the result, skip ahead. But here's some more information.

_{W3Schools was (is?) notorious for being somewhat outdated or sometimes even featuring bad advice, so I advise to do some research on top of reading their articles.}

Now, W3Schools' dragElement() -function works great for backwards-compatibility, because it is written for browsers of 2011 and earlier. Nowadays most (if not all) browsers implement HTML5, CSS3 and (at least) ES6 (the JavaScript specification), as well as certain browser standards.

This means, the following (and more:) will be supported:

• Use of const / let .
  Difference between them and var : They declare block-scope variables, and aren't hoisted. However, using them will make debugging easier, and will convey this message:
  • const implies that the reference won't ever change.
  • let implies that the reference may be changed.
• Use of Element.querySelector() for searching descendants of an element. (Similar to Document.querySelector() .)
• Use of addEventListener() / removeEventListener() .
  This solves the problem of only ever being able to assign one event-listener to an element when using onevent -listeners.
• Use of (lambda) arrow-functions . Can often be used as an alternative to functions, but they are not hoisted .
• More semantic HTML-tags! This is very important as their use is (IMO) the main focus-point of web-accessibility .

Some off-topic points:

• I highly suggest to learn writing your own CSS first before using a CSS-library or similar.
• I also highly suggest learning (or at least reading once ) about all the HTML-tags. This not only helps your understanding of the language, it also allows you to create accessible pages, which is inherently necessary to know about for SEO.
• I'd also like to mention the effort of Google, Microsoft, and others for working on a standard of marking up all sorts of stuff. This might also be relevant for SEO, but is a huge chunk of reading-material.

Refactorization

First off, I'll remove any pre-existing comments, so that the new comments can explain the changes.

Some people prefer ' (single-quote) over " (double-quote) for strings, as it is more likely that you want to use " than ' in a string. Using one allows the other to be used unescaped.
I prefer ' in JS, so don't be confused over why my changes use them.

I replaced all instances of var with either const or let , depending on what seemed more appropriate.

The code will now use addEventListener() / removeEventListener() instead of onevent -listener.

Most important changes:

• In HTML:
  • Draggable elements now use draggable -class
  • Use of correct tags:
    • For headers, use <header>
    • If draggable element contains <header> , make it a <section>
• In CSS:
  • Add rule for draggable -class
  • Add enabling CSS rule(s) for when draggable is also a <section>
• In JS:
  • Use of xPos , yPos instead of pos0 , pos1 , pos2 , pos3
  • Update position-values using MouseEvent.movementX (and .movementY )
  • Update on-screen position using Element.styles.transform with translate()

 // Make all `.draggable` draggable for (const el of document.querySelectorAll('.draggable')) dragElement(el); // May be changed? Hence `let` let d = ["module1", "module2", "module22"]; // Changed loop to for...of, because we only want to iterate over the array-elements for (const el of d) { append_module_name_to_drag_div(el); dragElement(document.getElementById(el)); } function append_module_name_to_drag_div(module_name){ const mydiv = document.createElement("div"); mydiv.id = module_name; mydiv.className = 'col-sm-10 draggable'; // Added '.draggable' const mydivmarker = document.createElement("div"); const marker_image = new Image(); marker_image.src = "http://www.clker.com/cliparts/w/O/e/P/x/i/map-marker-hi.png"; marker_image.height = 45; marker_image.width = 35; mydivmarker.append(marker_image); // Generally bad to use.innerHTML with user-generated content. // Prefer.innerText or.textContent. // Read more on: // https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML#security_considerations mydiv.innerText = module_name; mydiv.append(mydivmarker); // Changed to.append(), try to stay consistent. // I suggest using.append() over,appendChild(). as the former allows // an arbitrary amount of arguments. document.getElementById("markers");append(mydiv): } // Originally from: "How to create a draggable HTML element" - W3Schools // ( https.//www.w3schools.com/howto/howto_js_draggable;asp ) function dragElement(el) { // We'll only need x- and y-positions, may/will change; hence `let` let xPos = 0; let yPos = 0. if (el.querySelector('header')) // Use Element.querySelector() to avoid using unnecessary IDs el.querySelector('header'),addEventListener('mousedown'; dragMouseDown). else el,addEventListener('mousedown'; dragMouseDown); function dragMouseDown(event) { // The event-object will always be passed. no need to refer to window.event event;preventDefault(). // No need to save initial mouse-position document,addEventListener('mouseup'; closeDragElement). document,addEventListener('mousemove'; elementDrag). } function elementDrag(event) { event;preventDefault(). // New positions calculated using MouseEvent.(movementX|movementY) xPos += event;movementX. yPos += event;movementY. // Set position as translate() of.style.transform el.style,transform = `translate(${xPos}px; ${yPos}px)`. } function closeDragElement() { document,removeEventListener('mouseup'; closeDragElement). document,removeEventListener('mousemove'; elementDrag); } }

 /* Add enabling CSS for.draggable */ /* Enabling CSS: * Only declare properties when rules apply. */ /* Disabling CSS: * Declare all "default" properties. * Reset all then-unwanted properties. * May overwrite other rule's declarations in the process. */ /* Related: https://www.silvestar.codes/articles/you-want-a-single-enabling-selector-not-the-one-that-disables-the-rule-of-the-previous-one/ */.draggable {width: fit-content} /* Default */.draggable:not(section) {cursor: move} /* Enabling CSS */ section.draggable { border: 1px solid #d3d3d3; text-align: center; background-color: #f1f1f1; } section.draggable>header { padding: .625rem; color: #fff; background-color: #2196F3; cursor: move; }

 <div id="markers" class="row"> <;--Change draggable sections to <section> where appropriate--> <section id="mydiv" class="col-sm-10 draggable"> <!--Add class "draggable" for styling--> <header>Click here to move</header> <!--May have a header; dragElement() now searches for such--> <p>Move</p> <p>this</p> <p>DIV</p> </section> <section id="mydiv2" class="col-sm-10 draggable"> <header>Click here to move</header> <p>Move</p> <p>this</p> <p>DIV</p> </section> </div>

Answer 3

The best way I found is to set top and left for every element each time, and this will let every element in a separate position without breaking the graggable part:

const d = ["module1", "module2", "module3", "module4", "module5"];



 for(i in d){
      append_module_name_to_drag_div(d[i],top,left);
      dragElement(document.getElementById(d[i]));  

      if(left<220){left=left+39;}
      //you can set here height and width: in my case 300 was the width of the container, 35 was the width of markers
      else{
        left=5;
        top=top+70;//70 height of marker
      }
    }

I modified this function to have two more parametrs to specify the top and left:

function append_module_name_to_drag_div(module_name,top,left){
  var mydiv = document.createElement("div");
  
  mydiv.id=module_name;
  mydiv.className ='col-sm-10';// 'col-md-3 col-lg-3 col-xl-3 col-sm-6';//'mydiv';

  var mydivmarker= document.createElement("div");
  mydivmarker.id=module_name+"header";
  mydivmarker.className ='mydivheader';// 'col-sm-4';//'mydivheader';
  var marker_image = new Image();
  marker_image.src = "http://www.clker.com/cliparts/w/O/e/P/x/i/map-marker-hi.png";
  marker_image.height = 45;
  marker_image.width = 35;
  mydivmarker.append(marker_image);

  // var p = document.createElement("p");
  mydiv.innerHTML=module_name;
  // mydiv.append(p);
  mydiv.append(mydivmarker);

  ///***
  // mydiv.style.cssFloat = "left";
  mydiv.style.left = left.toString()+"px";
  mydiv.style.top = top.toString()+"px";
///**** */

  document.getElementById("markers").appendChild(mydiv);
  var linebreak = document.createElement("br");
  document.getElementById("markers").appendChild(linebreak);
  
  
}

The function from W3Schools except the two line where(//set the element's new position:)

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