Déplacement d'images liées (sans activer le lien)

Question

J'ai besoin de faire glisser/déplacer des images. Chaque image est liée à une autre page. Lorsque j'utilise les fonctions de déplacement, je peux faire glisser l'image, mais lorsque je la relâche, le lien de l'image se déclenche. Je dois faire glisser l'image, la relâcher, puis cliquer sur l'image si je veux ouvrir le lien. Que puis-je faire ?

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

J'ai trouvé Comment faire glisser en HTML5 un élément contenant un lien ? mais n'est pas clair et n'a pas de réponse concrète. Des idées ?

Merci d'avance.

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

Lorsque j'utilise les fonctions de déplacement, je peux faire glisser l'image, mais lorsque je la relâche le lien de l'image se déclenche. J'aurais besoin de faire glisser l'image, de la relâcher, et ensuite cliquer sur l'image si je veux ouvrir le lien. Que puis-je faire ?

Alors comment reconnaître si l'élément est glissé ou cliqué ? Intervalle de temps entre onmousedown , onmouseup des appels ? Les mouvements de la souris ?

Une chose est sûre, tu dois te débarrasser de anchor ou l'appel dans son click gestionnaire d'événement preventDefault() car il se met en travers du chemin.

Un exemple affreux de la façon dont cela pourrait fonctionner.

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>