大佬教程收集整理的这篇文章主要介绍了拖动 div 忽略某些元素，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我想在网页上拖动 div，以下是我的 HTML。现在它可以将 div 拖动到我右键单击 div ID 的任何位置 draggable
var isMouseDown,initX,initY,height = draggable.offsetHeight,wIDth = draggable.offsetWIDth;
draggable.addEventListener('mousedown',function(E) {
isMouseDown = true;
document.body.classList.add('no-SELEct');
initX = e.offsetX;
initY = e.offsetY;
})
document.addEventListener('mousemove',function(E) {
if (isMouseDown) {
var cx = e.clIEntX - initX,cy = e.clIEntY - initY;
if (cx < 0) {
cx = 0;
}
if (cy < 0) {
cy = 0;
}
if (window.innerWIDth - e.clIEntX + initX < wIDth) {
cx = window.innerWIDth - wIDth;
}
if (e.clIEntY > window.innerHeight - height + initY) {
cy = window.innerHeight - height;
}
draggable.style.left = cx + 'px';
draggable.style.top = cy + 'px';
}
})
draggable.addEventListener('mouseup',function() {
isMouseDown = false;
document.body.classList.remove('no-SELEct');
})<div ID="draggable" class="no-SELEct">
<div class="ignore">
<SELEct></SELEct>
</div>
<div>Other contents</div>
</div>
如果用户在 div 类中拖动 div，如何禁用拖动忽略
只需取消 @H_171_10@mousedown 元素上的 class="ignore" 事件：
var isMouseDown,initX,initY,height = draggable.offsetHeight,width = draggable.offsetWidth;
draggable.addEventListener('mousedown',function (E) {
// check to see if the event originated with the class="ignore" element
if(e.target.classList.contains("ignore")){
// If so,cancel the event and prevent it from bubbling
e.preventDefault();
e.stopPropagation();
}
isMouseDown = true;
document.body.classList.add('no-SELEct');
initX = e.offsetX;
initY = e.offsetY;
})
document.addEventListener('mousemove',function (E) {
if (isMouseDown) {
var cx = e.clientX - initX,cy = e.clientY - initY;
if (cx < 0) {
cx = 0;
}
if (cy < 0) {
cy = 0;
}
if (window.innerWidth - e.clientX + initX < width) {
cx = window.innerWidth - width;
}
if (e.clientY > window.innerHeight - height + initY) {
cy = window.innerHeight - height;
}
draggable.style.left = cx + 'px';
draggable.style.top = cy + 'px';
}
})
draggable.addEventListener('mouseup',function () {
isMouseDown = false;
document.body.classList.remove('no-SELEct');
})<div id="draggable" class="no-SELEct">
<div class="ignore">
<SELEct>
</SELEct>
</div>
<div>
Other contents
</div>
</div>以上是大佬教程为你收集整理的拖动 div 忽略某些元素全部内容，希望文章能够帮你解决拖动 div 忽略某些元素所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。