Javascript 拖动链接图像（不触发链接）

我需要拖动/移动一些图像。每个图像都链接到其他页面。当我使用拖动功能时，我可以拖动图像，但当我释放它时，图像的链接就会启动。如果我想打开链接，我需要四处拖动，释放，然后单击图像。我能做什么

JSFIDLE：

我发现了，但不清楚，也没有具体的答案。有什么想法吗

提前谢谢

HTML

JS

当我使用拖动功能时，我可以拖动图像，但当我释放它时 图像的链接启动。我需要拖来拖去，释放， 然后单击图像，如果我想打开链接。我能做什么

那个么，您如何识别元素是否正在被拖动或单击？

onmousedown

，

onmousedup

调用之间的时间间隔？鼠标移动

有一件事是肯定的，你必须摆脱锚定标记或调用它的

点击
事件处理程序
preventDefault（）
，因为它阻碍了你

这可能是一个丑陋的例子。


let state={
startDrag:错，
拖：错，
点击：错，
抵销额：-1，
副职：-1，
目标：空，
主播：空
}
让href=”https://placeholder.com/";
window.addEventListener（“加载”，（事件）=>{
state.anchor=document.querySelector（“锚”）；
state.anchor.addEventListener（'单击'，（事件）=>{
如果（！state.clicked）{
event.preventDefault（）
}    
});
文件。添加的列表器（“鼠标向下”，开始拖动）；
文件。添加的文件列表器（'mouseup'，stopDrag）；
})
功能启动（事件）{
const target=event.target？event.target:event.src元素；
state.target=目标；
const{clientX，clientY}=event；
state.offsetX=clientX；
state.offsetY=clientY；
state.startDrag=true；
如果（！target.style.left）{
target.style.left='0px'
};
如果（！target.style.top）{
target.style.top='0px'
};
state.coordX=parseInt（target.style.left）；
state.coordY=parseInt（target.style.top）；
document.onmousemove=dragDiv；
}
函数dragDiv（{clientX，clientY}）{
如果（！state.startDrag）{
返回；
}
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'；
返回false；
}
函数stopDrag（）{
document.onmousemove=null；
if（state.startDrag&&state.drag）{
//手柄停止拖动；
}
否则{
//手柄点击；
state.clicked=true；
state.anchor.click（）；
//或location.href=href；
}
state.clicked=false；
state.startDrag=false；
state.drag=false；
}
.dragme{
位置：相对位置；
宽度：270px；
高度：203px；
光标：移动；
}
#拖拉的{
背景色：#ccc；
边框：1px实心#000；
}

可能会设置
样式。在拖动开始时，将
a
的pointerEvents
设置为
none
，并在拖动结束时将其设置回
auto
。我实际上注释了直接链接用法，并在使用类“dragme”时触发锚定标记程序调用在其他图像中，链接再次触发——我是否遗漏了什么？可能是
event.preventDefault（）
未被调用。实际上，我将“锚定”id更改为一个类，并且仅与第二个类一起发生：trued event.stopPropagation（）--运气不好（但可能我用得不对）
<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>

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

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

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