Перетаскивание связанных изображений (без активации ссылки)

Question

Мне нужно просто перетащить / переместить некоторые изображения. Каждое изображение связано с другой страницей. Когда я использую функции перетаскивания, я могу перетащить изображение, но когда я отпускаю его, ссылка на изображение активируется. Мне нужно было бы перетащить, отпустить, а затем щелкнуть изображение, если я хочу открыть ссылку. Что я могу сделать?

JSFiddle: http://jsfiddle.net/grundum/wp0zhjbn/21/

Я нашел Как HTML5 перетащить элемент, в котором есть ссылка , но не ясно и не имеет конкретного ответа. Есть идеи?

Заранее спасибо.

HTML

<div class="dragme" draggable="true">
  <a draggable="false" href="https://placeholder.com/"><img class="dragme" draggable="false" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/microformat.svg"></a>
</div>

CSS

  .dragme {
    position: relative;
    width: 270px;
    height: 203px;
    cursor: move;
  }

  #draggable {
    background-color: #ccc;
    border: 1px solid #000;
  }

JS

function startDrag(e) {
  // determine event object
  if (!e) {
    var e = window.event;
  }

  // IE uses srcElement, others use target
  var targ = e.target ? e.target : e.srcElement;

  if (targ.className != 'dragme') {
    return
  };
  // calculate event X, Y coordinates
  offsetX = e.clientX;
  offsetY = e.clientY;

  // assign default values for top and left properties
  if (!targ.style.left) {
    targ.style.left = '0px'
  };
  if (!targ.style.top) {
    targ.style.top = '0px'
  };

  // calculate integer values for top and left 
  // properties
  coordX = parseInt(targ.style.left);
  coordY = parseInt(targ.style.top);
  drag = true;

  // move div element
  document.onmousemove = dragDiv;

}

function dragDiv(e) {
  if (!drag) {
    return
  };
  if (!e) {
    var e = window.event
  };
  var targ = e.target ? e.target : e.srcElement;
  // move div element
  targ.style.left = coordX + e.clientX - offsetX + 'px';
  targ.style.top = coordY + e.clientY - offsetY + 'px';
  return false;
}

function stopDrag() {
  drag = false;
}
window.onload = function() {
  document.onmousedown = startDrag;
  document.onmouseup = stopDrag;
}

Answer 1

Когда я использую функции перетаскивания, я могу перетаскивать изображение, но когда я отпускаю его, ссылка на изображение активируется. Мне нужно было бы перетащить, отпустить, а затем щелкнуть изображение, если я хочу открыть ссылку. Что я могу сделать?

Тогда как узнать, перетаскивают или щелкают элемент? Временной интервал между звонками onmousedown, onmouseup? Движение мыши?

Одно можно сказать наверняка: вам нужно избавиться от тега anchor или вызвать его click обработчик событий preventDefault(), поскольку он мешает.

Уродливый пример того, как это может работать.

let state = {
  startDrag: false,
  drag: false,
  clicked: false,
  offsetX: -1,
  offsetY: -1,
  target: null,
  anchor: null
}
let href = "https://placeholder.com/";

window.addEventListener("load", (event) => {
  state.anchor = document.querySelector("#anchor");
  
  state.anchor.addEventListener('click', (event) => {
    if(!state.clicked) {
      event.preventDefault()
    }    
  });
  document.addEventListener('mousedown', startDrag);
  document.addEventListener('mouseup', stopDrag);
})

function startDrag(event) {
  const target = event.target ? event.target : event.srcElement;
  state.target = target;

  const { clientX, clientY } = event;

  state.offsetX = clientX;
  state.offsetY = clientY;
  state.startDrag = true;
  
  if (!target.style.left) {
    target.style.left = '0px'
  };
  if (!target.style.top) {
    target.style.top = '0px'
  };

  state.coordX = parseInt(target.style.left);
  state.coordY = parseInt(target.style.top);
  document.onmousemove = dragDiv;
}

function dragDiv({clientX, clientY}) {
  
  if(!state.startDrag) {
    return;
  }

  const { target, coordX, coordY, offsetX, offsetY } = state;
  
  state.drag = state.startDrag;
  
  target.style.left = coordX + clientX - offsetX + 'px';
  target.style.top = coordY + clientY - offsetY + 'px';
  return false;
}

function stopDrag() {
  document.onmousemove = null;
  
  if(state.startDrag && state.drag) {
    // handle stop dragging;
  }
  else {
    // handle click;
    state.clicked = true;
    state.anchor.click();
    // or location.href = href;
  }
  
  state.clicked = false;
  state.startDrag = false;
  state.drag = false;
}

.dragme {
  position: relative;
  width: 270px;
  height: 203px;
  cursor: move;
}

#draggable {
  background-color: #ccc;
  border: 1px solid #000;
}

<div class="dragme" draggable="true">
  <a id="anchor" draggable="false" href="https://placeholder.com/"><img class="dragme" draggable="false" src="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/microformat.svg"></a>
</div>