Проблема с перетаскиванием нескольких изображений

Question

Я пытаюсь сделать несколько изображений на веб-сайте перетаскиваемыми и включить функцию ondblclick, чтобы отправить меня по другой ссылке (на будущее). Прямо сейчас я могу переместить верхний img, но второе изображение не может быть перемещено вообще, и только двойные щелчки работают идеально и индивидуально для обоих элементов. Вот код:

Любые предложения по перетаскиванию обоих элементов будут очень полезны. Большое спасибо заранее. :)

Answer 1

Добро пожаловать в StackOverflow, если я вас хорошо проработал, вы легко справитесь. Пожалуйста, проверьте свой код еще раз, вы не выбираете второй div. Кроме того, есть некоторые концепции, которые вы должны проверить, например, img теги, ids, встроенные стили и так далее. Вы можете напрямую перетаскивать изображения:)

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

Надеюсь на эту помощь, продолжайте и усердно учитесь ^^

Answer 2

Потрясающе, большое спасибо, gengns! Я все еще новичок во всем этом, поэтому я пытаюсь понять все, но это очень помогло :)

Теперь все работает, так что еще раз спасибо!