关于完美拖拽的问题三

简单的修改了一下，让它自动吸附，原理很简单，判断t,l的距离，只要让它在小于一个距离的时候距离变为0 就可以了

带边框的自动吸附的拖拽代码如下：

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/><title>带框的吸附拖拽</title><style>*{margin:0;padding:0;}#div1{width:100px; height:100px; position:absolute; background:red;cursor:move;overflow:hidden;border-radius:8px;}.div2{border:1px dotted #333;position:absolute;border-radius:8px;}</style><script>window.onload=function(){var oDiv=document.getElementById("div1");var disX=disY=0;oDiv.onmousedown=function(event){var event=event || window.event;disX=event.clientX-oDiv.offsetLeft; //判断鼠标在div的X轴位置
        disY=event.clientY-oDiv.offsetTop; //判断鼠标在div的y轴的位置var oBox=document.createElement("div");oBox.className="div2";oBox.style.width=(oDiv.offsetWidth-2)+"px";//为oBox的宽赋值
        oBox.style.height=(oDiv.offsetHeight-2)+"px"; //为oBox 的高赋值
        oBox.style.left=oDiv.offsetLeft+"px";//oBox的初始位置
        oBox.style.top=oDiv.offsetTop+"px";document.body.appendChild(oBox);if(oDiv.setCapture){ //兼容ie的事件捕获
            oDiv.onmousemove=move;oDiv.onmouseup=up;oDiv.setCapture();}else{document.onmousemove=move; //兼容ff chrome
            document.onmouseup=up;}function move(event){var event=event||window.event;var l=event.clientX-disX;var t=event.clientY-disY;if(l<50){l=0;}else if(l>(document.documentElement.clientWidth-oBox.offsetWidth-50)){l=document.documentElement.clientWidth-oBox.offsetWidth;}if(t<50){t=0;}else if(t>(document.documentElement.clientHeight-oBox.offsetHeight-50)){t=document.documentElement.clientHeight-oBox.offsetHeight;}oBox.style.left=l+"px";oBox.style.top=t+"px";}function up(){oDiv.style.left=oBox.offsetLeft+'px';oDiv.style.top=oBox.offsetTop+'px';document.body.removeChild(oBox);this.onmousemove=null;this.onmouseup=null;if(oDiv.releaseCapture){oDiv.releaseCapture();}}return false;};}</script></head><body><div id="div1"></div></body>
</html>

转载于:https://www.cnblogs.com/yuyu9988/p/3408569.html

关于完美拖拽的问题三相关推荐

[读码时间] 完美拖拽
说明:代码取自网络,注释为原文所有! <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
【拖拽】拖动原理拖动基本思路
收藏地址方便复用: https://blog.csdn.net/Wave_explosion/article/details/121921522 ** 拖拽 ** 必须使用三个事件: 1.onmous ...
html实现拖拽自定义表单,自定义表单（二）--拖拽（HTML版本）
系列文章自定义表单(一)--拖拽(JS版本) 自定义表单(二)--拖拽(HTML版本) 自定义表单(完)--(html5版本) 一.瞎扯最近在折腾人工智能,今天写了段tensorflow,用来分辨 ...
Js实战之实现方块拖拽功能
实现方块的拖拽 <!DOCTYPE html> <html> <head><meta charset="UTF-8"><tit ...
iOS学习笔记-068.手势识别02——捏合、拖拽、旋转手势
手势识别02捏合拖拽旋转手势一捏合手势 1 UIPinchGestureRecognizerh 2 代码示例 3 图示二拖拽手势 1 UIPanGestureRecognizerh 2 代码示例 ...
macbook触摸板拖拽不好用？复制选中难？教你两个设置，从此告别鼠标
触控板设置点击设置–触控板–更多手势,像下面这样设置辅助功能设置点击设置–辅助功能–左边下拉找到指针控制–触控板选项启用三指拖拽以后选中与拖拽只需要三指操作,再也不需要点按了,从此告别鼠标, ...
vue 自定义指令弹窗鼠标拖拽弹窗表头，弹窗移动
拖拽整个过程由三个事件完成鼠标按下事件 onmousedown 鼠标移动事件 onmousemove 鼠标抬起事件 onmouseup Vue.directive('drag', {inserted ...
Javascript实现拖拽效果
我们执行拖拽操作时, 1.按住某元素 2.移动鼠标 3.移动鼠标到相应位置后松开鼠标基于以上操作,页面拖拽效果需要三个事件 onmousedown onmousemove onmouseup 在on ...
可视化拖拽组件库一些技术要点原理分析（三）
本文是可视化拖拽系列的第三篇,之前的两篇文章一共对 17 个功能点的技术原理进行了分析: 编辑器自定义组件拖拽删除组件.调整图层层级放大缩小撤消.重做组件属性设置吸附预览.保存代码绑 ...

关于完美拖拽的问题三

关于完美拖拽的问题三相关推荐

最新文章

热门文章