Javascript jQuery：检测拖动，并添加特定样式的临时

我与同事一起工作，并意识到如果拖动链接，链接总是会被触发。我希望避免这种情况，并将其编码为：

$（“div”）.拖动（函数（）{
警告（“拖动时不应单击链接”）；
$（“div a”）.css（“指针事件”，“无”）；
});
div{
填充：10px；
背景颜色：黄色；
显示：内联块；
}
这可能是一个解决方案，其目的是捕获事件，并在指针移动时防止事件发生：


//解决方案
(() => {
设lock=0；
const prevent=e=>{
如果（锁！==2）
返回；
e、 预防默认值（）；
e、 停止传播（）；
};
常数解锁=e=>{
防止（e）；
setTimeout（（）=>lock=0）；
};
mydiv.addEventListener（'click'，prevent，true）；
mydiv.addEventListener（'pointerdown'，e=>lock=1，true）；
mydiv.addEventListener（'pointermove'，e=>lock&&（lock=2），true）；
mydiv.addEventListener（'pointerup'，unlock，true）；
mydiv.addEventListener（'pointercancel'，unlock，true）；
})();
#mydiv{
位置：绝对位置；
z指数：9；
背景色：#f1f1；
文本对齐：居中；
边框：1px实心#D3；
}
#mydivheader{
填充：10px；
光标：移动；
z指数：10；
背景色：#2196F3；
颜色：#fff；
}
一些随机拖动示例
移动

这个

DIV

DrageElement（document.getElementById（“mydiv”）；
功能牵引装置（elmnt）{
变量pos1=0，pos2=0，pos3=0，pos4=0；
if（document.getElementById（elmnt.id+“header”））{
document.getElementById（elmnt.id+“header”）.onmousedown=dragMouseDown；
}否则{
elmnt.onmousedown=dragMouseDown；
}
功能下拉列表（e）{
e=e | | window.event；
e、 预防默认值（）；
pos3=e.clientX；
pos4=e.clientY；
document.onmouseup=关闭DrageElement；
document.onmousemove=elementDrag；
}
功能元素拖动（e）{
e=e | | window.event；
e、 预防默认值（）；
pos1=pos3-e.clientX；
pos2=pos4-e.clientY；
pos3=e.clientX；
pos4=e.clientY；
elmnt.style.top=（elmnt.offsetTop-pos2）+“px”；
elmnt.style.left=（elmnt.offsetLeft-pos1）+“px”；
}
函数closeDrageElement（）{
document.onmouseup=null；
document.onmousemove=null；
}
}
hi，有趣的是，也许可以使用@IronMan自定义
ui拖拽
class–我刚刚尝试过。它不起作用。完全破坏布局，Box2D与jQuery UI可拖动函数不兼容。使用zimjs，您可以捕获（'mousedown'，e=>{…}）上的
mousedown
事件
myObject.on@IronMan使用jQuery也可以。但是如果我这样做了，那么链接就不能再点击了。谢谢你的回答！还有一个问题：是否可以只针对一个div而不是整个页面使用您的»解决方案«？如果
div
是锚元素的父元素，那么是的，只需将所有这些侦听器添加到
div
而不是
窗口，请参阅更新的回答谢谢您的评论！我为此提出了这个问题：–如果你能再次帮助我，我将非常感激！刚刚看到你的评论，我看到问题已经解决了，太奇怪了，这是我在上次更新中分享的一个简单提示，但它得到的票数超过了我必须编码和测试的完整解决方案：）