JavaScript 实现拖拽效果组件功能(兼容移动端)
页面元素拖拽是一种非常实用的前端效果，基于元素拖拽可以实现很多不同的功能，增加客户端许多操作的便捷性，大大提高用户体验。日常生活中大家多多少少都见过这种效果，所以就不废话了，直接开干吧。
预期目标
实现一个 Class 类，通过该 Class，可以将任意 DOM 元素（比如 div）一键变为可拖拽状态，也可以恢复成原来的状态，例如这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1 {
height: 50px;
width: 50px;
background-color: cadetblue;
}
#box2 {
height: 50px;
width: 50px;
background-color: blue;
}
#box3 {
height: 50px;
width: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="box1">1</div>
<a id="box2">2</a>
<div id="box3">3</div>
</body>
<script type="module">
// 我们要完成的目标 Class
import DragElement from './DragElement.js'
// 使 3 个元素可拖拽
let box1 = new DragElement(document.querySelector("#box1"))
let box2 = new DragElement(document.querySelector("#box2"))
let box3 = new DragElement(document.querySelector("#box3"))
// box2 解除拖拽效果，恢复为原来的样子
// box2.dragRelease()
</script>
</html>
原本的样子
随意拖放
一、算法思路
1.1 拖拽的行为描述
我们先思考如何描述拖拽这一行为。我的思路是这样的：
- 先对拖拽这一行为进行定义：在指定的元素上，若保持鼠标按下状态，则该元素将会跟随鼠标移动。当鼠标松开，该元素将不再跟随鼠标移动。如果是移动端的话，鼠标的角色改为触摸（touch）即可。
根据定义，我们可以确定几个关键信息：
- 鼠标移动，是拖拽算法本身的作用范围。
- 鼠标按下，开启拖拽
- 鼠标松开，关闭拖拽
可以看到，完整的拖拽功能分为 3 个部分，分别是开启、运行与关闭。分别对应鼠标的按下、运行、松开事件。 因此我们至少需要设计相应的 3 个函数，作为事件的回调。在这里我分别命名为 dragStart()、dragMoving()、dragEnd()。
这里就出现了第一个重点：如何描述拖拽功能的状态变化？
显然，鼠标的按下与松开，将会决定DOM 元素是否能够被拖拽，这是一种 “状态” 的变化。这种状态的变化，在编码上，可以通过一个变量来实现，也可以通过不断地添加 or 移除回调函数来实现。如果通过变量的话，在鼠标没有按下时，鼠标移动事件也会触发进行状态判断，这其实是没有必要的，因此方案上我们选择后者，鼠标按下与松开时，分别添加和移除实现拖拽的函数。
以上是拖拽本身的行为，此外，由于我们需要 DOM 元素能够在原本的状态和可拖拽状态之间进行转换，因此我们还需要 2 个函数，一个用于将 DOM 元素变为可拖拽状态，另一个用于卸载这些状态。前者我称为 dragActive()，后者我称为 dragRelease()。它们做的事情，就是添加和解除事件监听。
现在第一个问题解决了，我们来解决第二个问题，那就是：拖拽函数怎么实现？
1.2 拖拽的实现
首先看核心的，拖拽本身应该怎么计算，如何让元素跟着鼠标走。
同样的，我们继续想象实际的场景。鼠标按下时，我们假设鼠标的坐标处于(x0, y0) 点，鼠标移动，假设移动到了(x1, y1) 点。那么该元素，相对自身初始位置便移动了(x1-x0, y1-y0) 的距离。这种相对于自身移动的，在 CSS 上可以通过相对定位，也可以通过 transform: translate 或 translate3d 来实现，由于定位在布局中很常用，我们也不知道指定的 DOM 元素到底是什么样式，为了尽量不影响原来的布局，所以我们采用 transform。
再回到具体计算上，鼠标的位置 x 和 y，可以通过事件回调函数传入的参数 event 得到，在 PC 端是 event.clientX 和 event.clientY，移动端是 event.changedTouches[0].pageX 和 event.changedTouches[0].pageY。而 mousemove 事件是连续触发的，我们的拖动也要让元素跟着鼠标连续运动，因此需要不停更新 (x0, y0)，(x1, y1) 的值，在每个细小的运动中都进行差值计算，就像微积分一样。为了方便记录和更新，我们不妨把拖动中需要的变量用一个对象表示，称为 dragInfo，挂载到 document 元素上，这样在不同的函数、对象之间都可以访问。
class DragElement {
constructor(element) {
this.element = element
document.dragInfo = {
element: this.element,
x0: 0,
y0: 0,
x1: 0,
y1: 0
}
}
}
element 表示拖拽的元素，x 和 y 分别为计算所需的变量。
获取鼠标位置的函数：
updateDragPosition = (event) => {
return {
x: event.clientX || (event.changedTouches ? event.changedTouches[0].pageX : document.dragInfo.x0),
y: event.clientY || (event.changedTouches ? event.changedTouches[0].pageY : document.dragInfo.y0)
}
}
或许有人会有疑问，为啥不直接 event.clientX || event.changedTouches[0].pageX，而是要用三元表达式。这是因为有些情况下，上述两者可能都不存在，比如当鼠标移到浏览器左边缘的时候，就无法获得位置：
获取鼠标位置的函数写完后，就可以写拖拽的函数了：
dragMoving = (event) => {
document.dragInfo.x1 = this.updateDragPosition(event).x - document.dragInfo.x0 + document.dragInfo.x1
document.dragInfo.y1 = this.updateDragPosition(event).y - document.dragInfo.y0 + document.dragInfo.y1
document.dragInfo.x0 = this.updateDragPosition(event).x
document.dragInfo.y0 = this.updateDragPosition(event).y
document.dragInfo.element.style.transform = 'translate3d(' + document.dragInfo.x1 + 'px, ' + document.dragInfo.y1 + 'px, 0)';
}
但此时问题就来了，由于 document 上只有一个 dragInfo，不同的组件之间坐标冲突如何解决？其实这个简单，只需要在 this.element 上添加一个对象记录每次拖拽后的位置即可，每当点击一个拖拽元素时，就将该元素的信息注入 document.dragInfo。
this.element.dragPostion = {
x: 0,
y: 0
}
综上，我们已经解决了最核心的流程描述与算法部分，接下来只要编码就可以了。
二、编码实现
请根据之前说的思路，自行阅读代码，整体逻辑还是非常清晰的，如果有一些细节不懂，可以在评论区提出，或者我有空了再补充。
class DragElement {
constructor(element) {
this.element = element
document.dragInfo = {
element: this.element,
x0: 0,
y0: 0,
x1: 0,
y1: 0
}
document.updateDragPosition = this.updateDragPosition
this.dragActive()
}
// 更新鼠标位置
updateDragPosition = (event) => {
return {
x: event.clientX || (event.changedTouches ? event.changedTouches[0].pageX : document.dragInfo.x0),
y: event.clientY || (event.changedTouches ? event.changedTouches[0].pageY : document.dragInfo.y0)
}
}
// 为元素配置相应的拖拽控制函数
dragActive = () => {
if (!this.element) return
this.element.style.display = "block"
this.element.addEventListener('mousedown', this.dragStart, false)
this.element.addEventListener('touchstart', this.dragStart, false)
this.element.addEventListener('mouseup', this.dragEnd, false) // 释放
this.element.addEventListener('touchend', this.dragEnd, false)
this.element.addEventListener('touchcancel', this.dragEnd, false)
// 为该元素添加一个对象，保存当前位置
this.element.dragPostion = {
x: 0,
y: 0
}
}
// 释放配置
dragRelease = () => {
this.element.removeEventListener('mousedown', this.dragStart)
this.element.removeEventListener('touchstart', this.dragStart)
this.element.removeEventListener('mouseup', this.dragEnd) // 释放
this.element.removeEventListener('touchend', this.dragEnd)
this.element.removeEventListener('touchcancel', this.dragEnd)
this.element.style.display = ""
return this.element
}
// 点击捕获拖拽元素，初始化相应信息
dragStart = (event) => {
document.dragInfo.element = this.element
document.dragInfo.x0 = this.updateDragPosition(event).x
document.dragInfo.y0 = this.updateDragPosition(event).y
document.dragInfo.x1 = this.element.dragPostion.x
document.dragInfo.y1 = this.element.dragPostion.y
// 屏蔽默认行为
event.preventDefault();
// mousemove 绑定在 document 上，防止鼠标过快可能导致的元素跟丢
document.addEventListener('mousemove', this.dragMoving, false)
document.addEventListener('touchmove', this.dragMoving, false)
}
// 实时计算、更新相对位置变化
dragMoving = (event) => {
document.dragInfo.x1 = this.updateDragPosition(event).x - document.dragInfo.x0 + document.dragInfo.x1
document.dragInfo.y1 = this.updateDragPosition(event).y - document.dragInfo.y0 + document.dragInfo.y1
document.dragInfo.x0 = this.updateDragPosition(event).x
document.dragInfo.y0 = this.updateDragPosition(event).y
document.dragInfo.element.style.transform = 'translate3d(' + document.dragInfo.x1 + 'px, ' + document.dragInfo.y1 + 'px, 0)';
}
// 关闭拖拽
dragEnd = () => {
// 保存当前位置
this.element.dragPostion.x = document.dragInfo.x1
this.element.dragPostion.y = document.dragInfo.y1
// 解绑
document.removeEventListener('touchmove', this.dragMoving)
document.removeEventListener('mousemove', this.dragMoving)
}
}
export default DragElement
到此这篇关于JavaScript 实现拖拽效果组件功能(兼容移动端)的文章就介绍到这了,更多相关JavaScript 拖拽效果组件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
前言 运营小姐姐说想要可以直接拖拽排序的功能,原来在序号六的广告可能会因为金主爸爸加钱换到序号一的位置,拖拽操作就很方便 效果 实现方式 template部分 <el-table v-loading="loading" :default-sort="{prop: 'sortNum', order: 'ascending'}" :data="list" border align="left" > <el-tab
-
JS组件Bootstrap Table表格行拖拽效果实现代码
一.业务需求及实现效果 项目涉及到订单模块,那天突然接到一个需求,说是两种不同状态的订单之间要实现插单的效果,页面上呈现方式是:左右两个Table,左边Table里面是状态为1的订单,右边Table里面是状态为2订单,左边Table里面的行数据拖动到右边Table里面指定行的位置,拖动完成后,左边表格减少一行,右边表格增加一行.除此之外,还需要撤销操作(相当于Ctrl + Z操作),能够返回到上一步的状态.可能描述会让大家模拟两可,反正已经实现了,先来看看效果图吧. 1.先看看拖动之前的效果 2
-
工作需要写的一个js拖拽组件
复制代码 代码如下: /* *使用方法: * var d = new Drag({id:'dragPannel',maxLeft:500,maxTop:200}); * d.ready(); *请注意: * 拖动对象的left和top样式必须写在其style属性里边 * */ //矫正调用者.将 fn 作为 newObj 的方法调用 function repairCaller(newObj, fn){ return function(){ return fn.apply(newObj, argu
-
JS组件Bootstrap Table表格多行拖拽效果实现代码
前言:前天刚写了篇JS组件Bootstrap Table表格行拖拽效果,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.用了半天时间研究了下,效果是出来了,但是感觉不尽如人意.先把它分享出来,以后想到更好的办法再优化吧. 一.效果展示 1.拖动前 2.拖动中 3.拖动后 4.撤销回到拖动前状态 二.需求分析 通过上篇我们知道,如果要实现拖拽,必须要有一个可以拖拽的标签,或者叫容器,比如上篇里面的tr就是一个拖拽的容器,那么如果要实现选择行的拖拽,那么博主的第一反应是将选中的
-
react.js组件实现拖拽复制和可排序的示例代码
在实现复制前,对之前的拖拽排序组件属性进行了修改. 摒弃了value中的content属性,拖拽组件暴露的render函数,利用这个属性进行组件内部子组件的渲染,这点主要是参考了蚂蚁金服的Ant design里面一些组件的设计. 为了实现Data和model的脱藕,和sortKey一样,组件增加codeKey属性. 拖拽复制的效果如下: 由于实现组件的核心是根据value数据来渲染页面,因此实现拖拽复制功能,只需要在"拖拽释放"的时候,将被拖拽方的数据放到当前目标所在的value数组中
-
JavaScript 实现拖拽效果组件功能(兼容移动端)
页面元素拖拽是一种非常实用的前端效果,基于元素拖拽可以实现很多不同的功能,增加客户端许多操作的便捷性,大大提高用户体验.日常生活中大家多多少少都见过这种效果,所以就不废话了,直接开干吧. 预期目标 实现一个 Class 类,通过该 Class,可以将任意 DOM 元素(比如 div)一键变为可拖拽状态,也可以恢复成原来的状态,例如这样: <!DOCTYPE html> <html lang="en"> <head> <meta charset=
-
JavaScript实现拖拽效果
要实现JavaScript的拖拽效果,首先我们需要知道事件对象几个有关于实现拖拽效果的坐标 获取事件对象 var e = e || window.event; 根据需求需要用到的拖拽效果的坐标 clientX:鼠标点击位置相对于浏览器可视区域的水平偏移量(不会计算水平滚动的距离) clientY:鼠标点击位置相对于浏览器可视区域的垂直偏移量(不会计算垂直滚动条的距离) offsetX:鼠标点击位置相对于触发事件对象的水平距离 offsetY:鼠标点击位置相对于触发事件对象的垂直距离 pageX:
-
React.js组件实现拖拽排序组件功能过程解析
因为使用了react.js技术栈,所以封装优先考虑输入和输出.基于数据驱动去渲染页面.控制拖拽元素的顺序. 由于我不考虑兼容IE8等旧版本浏览器,拖拽的效果采用了HTML5的拖放(Drag 和 drop).当然,如果要求兼容性丰富,使用鼠标点击的相关事件也很简单. 实现的效果如下: 第一步是先了解H5拖放的相关属性,MDN上有详细的说明,链接 有一点需要注意的是,react.js会给所有的属性事件名称前加上"on",后面则为驼峰式写法.例如原生的click事件,在react.js里应使
-
JavaScript简单拖拽效果（1）
拖拽在前端开发中是很常见的功能,也是基本功之一,本文是不限制范围的拖拽也就是最简单的拖拽,鼠标按下对象,拖拽,松开停止! 1,onmousedown事件 2,onmousemove事件 3,onmouseup事件 因为在按下时拖动,所以onmousemove事件在down后才注册,up事件是用来解绑事件,消除事件! <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title
-
JavaScript实现拖拽简单效果
本文实例为大家分享了JavaScript实现拖拽效果的具体代码,供大家参考,具体内容如下 1.1 拖拽的基本效果 思路: 鼠标在盒子上按下时,准备移动 (事件加给物体) 鼠标移动时,盒子跟随鼠标移动 (事件添加给页面) 鼠标抬起时,盒子停止移动 (事件加给页面) var o = document.querySelector('div'); //鼠标按下 o.onmousedown = function (e) { //鼠标相对于盒子的位置 var offsetX = e.clientX -
-
javascript实现PC网页里的拖拽效果
几年前,我参与设计开发一个房产网的项目,我负责前端工作,由于项目经理要求比较高,参考了很多房产类网站比较优秀的功能,想把别人比较优秀的设计和想法集合到一起,那时的设计稿和功能实现,简直就是改了又改,今天做好的一个很好的效果,可能第二天就要推到重来,算了,不说这些了,还是说说我们今天要讲解的案例吧,不知道大家访问过搜房网没有(完全没有做广告之嫌,搜房网,可以给点广告费不),其中有一个功能产品经理特别喜欢,那,就是下面的这个: 这是现在的效果,可能改了一些,原来的效果是,里面的这张图是可以上下左右拖
-
JavaScript实现拖拽功能
本文实例为大家分享了JavaScript实现拖拽功能的具体代码,供大家参考,具体内容如下 盒子拖拽-运用到的有onmousedown事件,onmousemove事件以及onmouseup事件 1.当鼠标点击下去的时候我们需要获取鼠标所在位置的横纵坐标,然后获取盒子的离页面的横纵方向的距离 2.计算出鼠标相对盒子的距离 3.当鼠标移动的时候,获取鼠标移动的距离,在永鼠标此刻的位置减去鼠标相对盒子的距离,获得的是盒子此刻的坐标位置 4.将这个位置赋值给盒子 5.鼠标抬起,清除鼠标移动事件: 代码:
-
javascript支持firefox,ie7页面布局拖拽效果代码
javascript 拖拽JavaScript Google IG Drag Demo,非常棒的拖动,准备用于F2Blog新Theme的后台模块设置,之间的拖 动 拖拽效果的页面效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag.htm加强版效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag2.htm拖拽原理: 关于拖拽的基础,可以参考这篇文章,讲得非常不错. 其实原理很简单,就是
-
Javascript基于jQuery UI实现选中区域拖拽效果
一.效果展示 普通的三个div 鼠标拖动选中效果 选中所有的div 这样貌似看不出效果,没关系,我们有神奇的gif动画,来一个整体的动画效果感受下. 二.代码实现 整个代码其实也不难,需要用到一个博主自己封装的js文件. AreaSelect.js 考虑到代码量有点大,并且知乎没有代码折叠功能,所以这里就留一个文件名.等博主抽时间将它开源到github上面去,当然,有需要的朋友也可以直接联系博主,博主免费提供! 引入这个js后,还需要引用jquery和jquery UI相关文件. <script