div拖拽

div拖拽

……………………………………………………………………………………………………………

开发工具与关键技术：Adobe Dreamweaver CC 2017

作者：林敏静

撰写时间：2019年6月2日

……………………………………………………………………………………………………………

最近呢在DN上学习到了一个新的知识——div拖拽，如下图，在页面上把div水平拖拽离开原来的位置，这个究竟是怎么样实现的呢？这里就来和大家一起学习一下。

首先来看这个div需要什么样式（如下图，容器可自行调整），要给它设置绝对定位，目的是脱离文件流以便于拖拽，还有就是鼠标移动到div处由箭头指针变成移动的指针☩，

然后我们来写它的js代码，拖拽功能呢主要就是触发三个事件：onmousedown点击，onmousemove移动，onmouseup弹出，首先就是鼠标点击物体那一刻相对于物体左侧边框的距离等于鼠标点击时的位置相对于浏览器最左边的距离减去物体左边框相对于浏览器最左边的距离，接着就是在鼠标移动时重新得到物体的距离，最后呢在鼠标弹起来的时候就不再移动，还有要预防鼠标放上去的时候还会移动（详细代码如下图）：

我们来到页面上看一下，在拖拽div后点击获取div当前位置的按钮，就可以看到这个div被拖拽后距离浏览器最左边的边距，（如下图）

我们在页面输出那还可以看到div每拖拽距离浏览器最左边的边距，有重复出现的位置就会有出现次数在前头写着。

这里举的例子是水平方向的拖拽，也就是相当于在坐标图的X轴上移动，当然也可以垂直移动，也就在坐标图的Y轴上下移动，距离就是到浏览器最顶部（top）的距离，既想要水平移动也想要上下移动的也可以，把水平移动和上下移动的相关代码一起写在相应代码位置即可，本次个人学习就分享到这里啦！

注：本文主要技术知识出于它处，本文仅为个人学习交流