首页
学习
活动
专区
工具
TVP
发布

js拖拽

开发了那么久,对于js实现拖拽多少都写过,用于实际项目却没有。 先看一下之前写: 如果鼠标慢慢移动,拖拽是没有任何问题,如果速度快了,那么鼠标和元素就会分离。...因为我们是监听鼠标移动事件,鼠标移动时候需要执行我们定义函数,函数执行会有一些延时,当鼠标移动速度过快,导致函数延时使得元素跟不上鼠标移动速度,从而鼠标移出了元素,也就造成了元素不跟随鼠标了。...解决办法就是把监听元素换成document或者body,当函数执行延时了,因为鼠标还是在document和body上,也能一直触发函数,两者效果是一样,只有一个小区别 document: ?...两者都能很流畅拖动,区别就是浏览器上面的地方,不属于body,所以使用body会失效,建议使用document最好。 最后贴上代码: <!...之前在vue里面移除时候就遇到过这个问题。如果是想移动端使用,就都改成监听touch,任何用touches里面的参数。当然,你也可以去写一个兼容PC和移动端。 (完)

5.3K30
您找到你想要的搜索结果了吗?
是的
没有找到

js拖拽上传图片

有时候,在开发中,需要遇到拖拽上传图片需求,即从磁盘选中一张或多张图片,然后按着鼠标把图片拖动到页面上指定区域,实现图片上传。...1、后端上传图片接口 我是之前用vue写一个简单后台系统时候,用JavaSpringMVC+MyBatis框架写了一个简单后台管理一些接口,刚好有一个上传用户头像接口,该接口是把上传后图片存储在另外一台...ie=edge"> Document <script src="https://cdn.bootcss.com/jquery/1.12.0/jquery.<em>js</em>...里面用<em>的</em>formData对象来上传图片<em>的</em>,该对象<em>的</em>作用是:   1、用一些键值对来模拟一系列表单控件,即把form中所有表单元素<em>的</em>name与value组装成一个queryString;   2、异步上传二进制文件...这里<em>的</em>不同也就是指前者在发送<em>的</em>每个字段内容之间必须要使用分界符来隔开,比如文件<em>的</em>内容和文本<em>的</em>内容就需要分隔开,不然服务器就没有办法正常<em>的</em>解析文件,而后者 post 当然就没有分界符直接以 name =

18K30

js事件高级:拖拽

什么是拖拽 拖拽就是在某一个对象上,当鼠标按下去之后,拖着对象走,松开鼠标时,对象位置变成拖拽位置 简单拖拽 1.实现简单拖拽功能 2.当拖拽对象到网页边缘时,会停留在边缘 实现代码 <!..._吸附 1.在实现简单拖拽基础上给拖拽对象一个区域范围 2.拖拽吸附:在靠近父级边缘时自动吸附在父级边缘 实现代码 <!...带框拖拽拖拽另一种形式,拖动时,跟着移动是对象虚线框,虚线框就是对象将要拖移到达位置 实现代码 <!...oDiv0.removeChild(oBox); } 实现效果 自定义滚动条 自定义滚动条是利用拖拽功能实现滚动条功能...下面的案例实现了 1.利用自定义滚动条改变div大小 2.利用自定义滚动条改变div透明度 实现代码 <!

9.2K20

js拖拽自动排列

上一次写了拖拽,其实主要还是想实现拖拽之后实现自动排列,跟手机屏幕那样移动图标可以自动排列,先看效果: ? 很常见一个效果,先说一下思路: 每一个元素都是绝对定位,初始化时候是通过js去排列。...拖拽使用方法跟上一篇文章一模一样。...定义了一个数组,每个元素字段: {el: elArr[i], sort: i, index: i} el是这个元素,用于排列,也就是改变top和left,sort是元素排列位置,index是当前元素...拖拽时候,当鼠标点击选中当前元素时候,这个元素移动,当移动到另一个元素一半时候,相当于要替换这个元素,我是以这样一个方法判断移动到哪一个位置: let moveIndex = Math.round...我定义了一个当前index,如果移动到index不等于初始化index,那么就是要发生移动,当从大移动到小,在这个范围内,所有排序都要加1,其他不变,如果从小移动到大,这个范围内排序都要减1,其他不变

5.6K20

js 实现元素拖拽

概述 js 实现拖拽,主要使用元素 onmousedown、onmousemove、onmouseup 三个事件实现。...1、onmousedown:鼠标按下事件 2、onmousemove:鼠标移动事件 3、onmouseup:鼠标抬起事件 实现思路 我们当左键点击时,需要记录当前鼠标点击位置相对于该元素左上角x,y...坐标,这里我们使用diffX和diffY来表示 然后我们移动时需要不断计算当前元素距离浏览器左边和上边距离; 同时给元素进行赋值; 当鼠标抬起时,取消鼠标移动事件和鼠标抬起事件。...// 浏览器兼容 e = e || window.event; // 元素...clientX 和 clientY 默认是以元素左上角位置来计算,这里需要向左向上同时减去鼠标点击位置差,从而可以保证鼠标始终显示在拖拽元素时位置

9.1K30

原生JS 实现页面元素拖动 拖拽

大家好,又见面了,我是你们朋友全栈君。 1 ....实现原理 要实现页面元素拖动,其原理就是根据鼠标的移动实时更改元素left 和 top值(当然元素肯定是要做绝对定位),那么就达到我们要效果了呀!...鼠标的位置是可以通过 e.clientX 获取,通过获取值减去鼠标和目标元素之间偏移量,就是我们 left 值了呗, top值是同理,不过记住要设置界限哟,不然跑出去了。...代码我尽量写了注释,如果还是有什么不懂,直接评论就好了,我会尽快回复。 2 . 实例展示 <!...; // 我们想要拖拽元素,其实就是根据鼠标的移动实时更改元素left 和 top值 // 鼠标的位置是可以通过e.clientX 获取,然后减去x 不就是我们left值了 //鼠标移动,肯定是在按住情况下移动

5.1K30
领券