拖拽功能实现思路_sunflower_shao的博客-程序员宅基地_拖拽实现

1、通过mousedown事件,记录被拖拽物体和鼠标按下位置的相对坐标
2、在mousedown事件里面添加mousemove事件,获取当前鼠标的坐标并减去物体与鼠标的相对坐标(步骤一中记录的相对位置),并将新坐标赋给被拖拽物体
3、当松开鼠标,触发mouseup事件,在mouseup事件里给Mousemove事件赋空值null
function limitDrag(node){
var offsetX = 0;
var offsetY = 0;
node.onmousedown = function(ev){
var e = ev || window.event;
//1、记录相对位置
offsetX = e.clientX - node.offsetLeft;
offsetY = e.clientY - node.offsetTop;

				//2、添加鼠标移动
				document.onmousemove = function(ev){
					var e = ev || window.event;
					var l = e.clientX - offsetX;
					if(l <= 0){
						l = 0;
					}
					var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
					if(l >= windowWidth - node.offsetWidth){
						l = windowWidth - node.offsetWidth;
					}
					var t = e.clientY - offsetY;
					if(t <= 0){
						t = 0;
					}
					var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
					if(t >= windowHeight - node.offsetHeight){
						t = windowHeight - node.offsetHeight;
					}

					node.style.left = l + 'px';
					node.style.top = t + 'px';
				}
			}

			document.onmouseup = function(){
				document.onmousemove = null;
			}
		}
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sunflower_shao/article/details/87075048

智能推荐

拖拽功能实现思路

1、通过mousedown事件,记录被拖拽物体和鼠标按下位置的相对坐标 2、在mousedown事件里面添加mousemove事件,获取当前鼠标的坐标并减去物体与鼠标的相对坐标(步骤一中记录的相对位置),并将新坐标赋给被拖拽物体 3...

QQ中未读气泡拖拽消失的实现(参照一位年轻牛B的博主的思路自己实现了一下)...

相仿的年纪,很佩服他! 首先分析拖拽时的图,大圆、不规则的图(实际上时有规律的不然也画不出来,...博主 大圆用了UIView 不规则的图 用CAShapeLayer ,小圆也是UIView,在我自己实现时,发现其实大圆用UIView...

小程序实现拖拽功能

小程序实现拖拽:movable-area和movable-view必须搭配使用才可以实现 1.movable-area必须设置W和H,默认为10px 2.movable-view小于movable-area时,movable-view的移动范围是在movable-area内 3.direction一共有4个...

代码实现拖拽及吸附功能,具体要求如下

代码实现拖拽及吸附功能,具体要求如下: 两个绿色方块作为盒子,一个红色方块作为可拖拽方块; 红块可从上方盒子拖拽到下方盒子中; 拖拽结束后,红块被吸附到其所在盒子中距离最近的角上。 &lt;!doctype ...

js应用-实现博客个性主页布局拖拽功能

NT Space代码满天飞,所以自己参考GoogleUI的思想,简化和优化了一些操作代码,实现了博客系统基本的拖拽布局的效果,暂时未考虑其他浏览器的兼容性问题。下一步准备改造成Jquery的插件形式,...

拖拽功能的实现

当鼠标按下的时候获取一个鼠标的位置:pt1  经过拖动以后释放鼠标时的位置为:pt2  获取滚动条位置:CPoint ScrollPoint = GetScrollPosition();  新的滚动条位置:ScrollPoint -= (pt2 -

ssh远程主机秘钥失效的解决方法

问题描述 A机器通过ssh-copy-id [email protected](B)添加了链接到B机器的ssh秘钥。但是某天,B机器的密码修改或者机器... ssh IP(B) @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ @ WARNING: POSSIBLE DNS S

[搬家帖]实现文件拖拽

使用过QQ的人都知道,只要把文件拖拽到消息框中就可以传送文件了。那么这种功能是如何实现的呢?其实很简单,只需要响应一个WM_DROPFILES消息就可以了。 在基于对话框的程序中,默认是没有这个消息的,按下Ctrl+W...

移动端实现拖拽功能

移动端实现拖拽功能 :当在一个界面里想要实现一个可拖拽的导航条时,需要考虑一下因素 1 判断开始拖拽的操作,只有移动一点距离才会移动,不然会与点击事件混乱,move移动时阻止点击事件 event.preventDefault() ...

希望解除屏蔽 【已解决】

1秒钟之后将自动跳转到首页,你还可以… 返回站点 返回首页 ************************************************************** 如果我直接访问博客网址:http://blog.csdn.net/Michael_shao 则会出现一下错误提示:...

Ubuntu18.04 无法解析域名

解决方法: 首先先输入以下4条命令 1. sudo lshw -numeric -class network2. sudo ifconfig -a3. sudo route -nv4.... 看以下图解 ...配置动态解析文件 ...有的系统可能没有该文件,在nameserver 127.0.1.53...

C语言PTA L1-063吃鱼还是吃肉

L1-063 吃鱼还是吃肉 (10 分) fish.JPG 肉.JPG 国家给出了 8 岁男宝宝的标准身高为 130 厘米、标准体重为 27 公斤;8 岁女宝宝的标准身高为 129 厘米、标准体重为 25 公斤。 现在你要根据小宝宝的身高体重,给出...

19--拖拽实现的主要原理

&lt;script&gt; var box=document.querySelector('div'); box.onmousedown=function(e){ //offsetLeft和offsetTop该元素到定位父元素的left值和top值 var disX=e.clientX-this.offsetLe...

关于vscode使用ssh连接Ubuntu虚拟机的连接失败的一些解决方法

关于vscode使用ssh连接Ubuntu虚拟机的连接失败的一些解决方法 先贴两个对我解决问题非常重要的链接 链接: link ...(尤其是这个一定要仔细看,非常重要) link ...解决过程 我们要明确,连接失败的问题定位。...

利用pycharm使用pytorch

本小节只讲如何通过pycharm使用pytorch,pytorch的详细安装点击这里https://blog.csdn.net/huang_shao1/article/details/82958551 anaconda的详细安装点击这里...

拖拽练习

当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove *3.当鼠标松开时,被拖拽元素固定在当前位置 onmouseup //设置btn01对鼠标按下相关的事件进行捕获 //当调用一...

24.盒子拖拽功能实现

&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;...script type="text/javascript" src="jquery-3.3.1.js...

Linux系统下ping命令报错 name or service not know

问题描述 CentOS,但是当执行ping命令的时候,提示name or service not known 解决方法 1、添加DNS服务器 1 ... 进入编辑模式,增加如下两行内容,分别是首选DNS服务器和备选DNS服务器。(可以自己选择DNS...

拖拽功能

&amp;lt;!DOCTYPE HTML&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt; #div1 {width:190px;height:210px;padding:10px;border:1px solid #...text/j

字符串—给定两个字符串,确定其中一个字符串重新排列后是否可以变成另外一个字符串

1. 实现 注意:是否需要考虑大小写;是否需要考虑空格; 下面的实现考虑大小写和空格; (1)对两个字符串分别排序,排序之后若相等则可以;代码书写尽可能追求模块化和简洁; /** * 判断一个字符串是否可以通过...

拖拽动作的简单实现

Title    html,body{  padding: 0;  margin: 0;  }  #box{  position: absolute;  width: 200px;  height: 200px;  

文字实现两端对齐

/*** 你好,我也遇到这样的问题了,我想可能是 justify 需要有换行才能触发这种效果,另外我把 span 换成了 :after,也达到了同样的效果,而且这样不需要额外的span就可以写成公共的 class ***/ ...

可拖拽可扩展面板

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; * { margin:...

绿屏抠图(image matting)

提前声明本文内容: 1、本文核心算法(alpha求解)基于论文Shared Sampling for Real-Time Alpha Matting进行; 2、本文对上面论文的核心算法进行了分析; 3、对于绿色背景的视频进行自动抠图与重新合成;...

拖拽功能实现

因项目需要实现一个基本拖拽功能,实现一个容器中元素列表的顺序可根据拖拽改变,先看具体sample实现: 具体sample写在vue框架中,

AYITACM第三周周赛 E - 盒子游戏

Description 有两个相同的盒子,其中一个装了n个球,另一个装了一个球。Alice和Bob发明了一个游戏,规则如下:Alice和Bob轮流操作,Alice先操作每次操作时,游戏者先看看哪个盒子里的球的数目比较少,然后清空这...

实现拖拽

draggable="true"属性设置为true,即可以拖拽. 通过在拖动dom上设置οndragstart="drag(event)"属性方法,在方法中进行ev.dataTransfer.setData(“Text”,ev.target.id);储存. 在释放目标上设置οndrοp=“drop...

Vue动画离开动画不生效

官方Demo地址 起因 在写vue动画的时候参考官方给的demo发现只有进入动画没有离开动画。下面是官方代码。 &amp;lt;div id=&quot;demo&quot;&amp;gt; &amp;lt;button v-on:click=&quot;show = !...

前端拖拽排序插件的实现——讲一个六耳猕猴和孙悟空的故事

先说说一个拖拽功能的实现思路 其实类似于六耳猕猴和孙悟空的关系 一只是真猴子,另一只也是真猴子,不能说六耳猕猴是个假猴子,他确实在西游记的某几集里出现一下,代替了一下孙悟空,只目的不纯,而且有点假,把...

随便推点

推荐文章

热门文章

相关标签