CODEWITHSUNDEEP
html
1BobFTW1
1BobFTW1

Reputation: 3

Problem with making multiple images draggable

I'm trying to make multiple images on a website draggable and include an ondblclick function to send me to a different link(for later on). Right now I can move the top img but the second image can't be moved at all and only the double clicks work perfectly and individually for both elements. Here is the code:

<!DOCTYPE html>
<html>
<style>
#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}
</style>
<body>

<div id="mydiv">
  <img src="_dsc5502.jpg" name="bild06" class="BILDER" style="position:absolute; z-index:7; left: 639px; top: 146px;" ondblclick="javascript:alert('event has been TRIGGERED');">
</div>

<div id="mydiv">
  <img src="_dsc5494.jpg" name="bild05" class="BILDER" style="position:absolute; z-index:6; left: 690px; top: 34px;" ondblclick="javascript:alert('event has been triggered');">
</div>

<script>
//Make the DIV element draggagle:
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;
  }
}
</script>

</body>
</html>

Any suggestions for making both elements draggable would be a major help. Thanks so much in advance. :)

Upvotes: 0

Views: 58

Answers (1)

gengns
gengns

Reputation: 1653

Welcome to StackOverflow, if I undertood you well you can do it easily. Please, check your code again, you are not selecting the second div Apart from that there are some concepts that you should check like img tags, ids, inline styles and so on. You can make draggable the images directly : )

// Make the images draggable:
document.querySelectorAll('img').forEach($img => dragElement($img))

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;
  }
}
img {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
}
<img src="https://media.prod.mdn.mozit.cloud/attachments/2019/07/15/16797/4c169938d5f923bfa4db5ee937f24ebe/clock-demo-400px.png">
<img src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg" ondblclick="javascript:alert('event has been triggered');">

Hope this help, keep going and study hard ^^

Upvotes: 1

Related Questions