JS 拖拽事件
1.drag等拖拽事件
拖放是由拖动与释放两部分组成，拖放事件也分为被拖动元素的相关事件，和容器的相关事件。 被拖动元素的相关事件如下所示：
被拖动元素相关事件:
| 事件 | 描述 |
|---|---|
| dragstart | 用户开始拖动元素时触发 |
| drag | 元素正在拖动时触发 |
| dragend | 用户完成元素拖动后触发 |
容器相关事件如下所示：
| 事件 | 描述 |
|---|---|
| dragenter | 当被鼠标拖动的对象进入目标容器时触发此事件 |
| dragover | 当被拖动的对象在目标容器范围内拖动时触发此事件 |
| dragleave | 当被鼠标拖动的对象离开目标容器时触发此事件 |
| drop | 在一个拖动过程中，释放鼠标键到目标容器时触发此事件 |
实现拖拽
1.首先给标签添加draggable="true"属性表明标签可拖拽。
72.通过标签绑定dragstart事件,会在用户拖动标签时开始触发。我们将拖拽标签的id存入其中。
// 拖动元素开始触发
div.ondragstart = function (e) {
e.dataTransfer.setData('Text', e.target.id)
oldPar = div.parentNode // 记录父节点
}3.在放置拖动元素的容器上绑定一个 dragover 事件，这个事件用于规定在何处放置被拖动的数据。默认情况下，是无法将一格元素放置到另外一个元素里面的，所以如果需要设置允许放置，则要在 ondragover 事件中加上 e.preventDefault() 方法来阻止默认行为。
dragBox.ondragover = function (e) {
e.preventDefault()
}4. 将元素拖拽放置在容器中(在容器中松开鼠标),在在容器中绑定一个drop 事件中,同样需要调用 e.preventDefault() 方法来阻止默认行为。然后可以通过 dataTransfer.getData("Text"); 方法获取之前的 drag(event) 函数中保存的信息，也就是被拖动元素的 id。接着通过 容器dom实例.appendChild() 方法为将拖动元素作为元素容器的子元素追加到元素容器中，这样就能成功实现拖放。
// 容器内放置拖动元素
dragBox.ondrop = function (e) {
e.preventDefault()
let data = e.dataTransfer.getData("Text") // 这么说这是一个静态对象
let newChil = document.getElementById(data)
dragBox.appendChild(newChil) // 追加子元素
}案例
效果展示
代码实现
拖拽
1
2
3
4
5
6
7
8
9
2. mousedown、mousemove、mouseup等事件实现拖拽与碰撞
我们直接用一个案例来解释：
效果展示
ps: 还是有bug,目前找不出来。
实现拖拽
我们实现这个功能,需要3个事件:
前提: 子元素是相对定位,容器是绝对定位，脱离文档流。
1.按住鼠标 (mousedown),获取当前元素 offsetLeft 和offsetTop,当前鼠标的clientX、clientY,用鼠标坐标 - 元素的offsetLeft、offsetTop属性，求出鼠标-元素边界的距离.
2.移动鼠标(monusemove),获取移动元素中鼠标的clientX、clientY 减去上边求出的鼠标到元素边界的距离 ,求出元素移动top、left值，赋给元素。
3.松开鼠标(monuseup),将鼠标移动事件清除清除。
实现碰撞挤开其他的元素
下面有2个元素,判断2个元素是否碰撞,如果碰撞的情况非常多，我们可以考虑没碰撞的情况，下面满足任意一种情况就是没碰撞的。
实现代码
我们通过检测元素是否碰撞，元素之间间隙到一定距离;就将空隙距离返回。
// 碰撞检测事件
// 拖拽元素为node2
function knock(node1, node2) {
var l1 = node1.offsetLeft;
var r1 = node1.offsetLeft + node1.offsetWidth;
var t1 = node1.offsetTop;
var b1 = node1.offsetTop + node1.offsetHeight;
var l2 = node2.offsetLeft;
var r2 = node2.offsetLeft + node2.offsetWidth;
var t2 = node2.offsetTop;
var b2 = node2.offsetTop + node2.offsetHeight;
// 左空隙
let _left = l2 - r1
// 右空隙
let _right = l1 - r2
// 上空隙
let _top = t2 - b1
// 下空隙
let _bottom = t1 - b2
// 没碰撞
let obj = {};
// 没碰撞;大于1px 小于15px应该顶撞他;其余情况没考虑，统一设为 0px(为啥1 -15 之间，鼠标移动太快，检测有延迟)
if (l2 > r1 || r2 < l1 || t2 > b1 || b2 < t1) {
// 左空隙 >=10 <=20
if (_left >= 1 && _left <= 15) {
obj.left = _left
} else {
obj.left = 0
}
// 右空隙 大于10
if (_right >= 1 && _right <= 15) {
obj.right = _right
} else {
obj.right = 0
}
// 上空隙 大于10
if (_top >= 1 && _top <= 15) {
obj.top = _top
} else {
obj.top = 0
}
// 下空隙 大于10
if (_bottom >= 1 && _bottom <= 15) {
obj.bottom = _bottom
} else {
obj.bottom = 0
}
return obj
} else {
// 上面理论上，元素之间有空隙;
return true
}设置bd函数, 将拖拽div，和div数组传入,遍历div数组,然后调用上面knock()方法，来判断是否碰撞；
将拖拽div距离其他标签的div句空隙距离，将距离设置给其他div,从而实现碰撞撞开其他元素。
// 给拖拽中div绑定碰撞函数，并根据返回值，拖拽div与其他div之间隔出空隙
function bd(div1, divs) {
let c_divs = []
for (const div of divs) {
c_divs.push(div)
}
// 遍历删除div1
divs1 = c_divs.filter(div =>
div1 != div
)
// 记录与他碰撞的div元素和是否碰撞
for (const div of divs1) {
let item = {}
let isKnock = knock(div, div1)
// 拿出2个div间隙
if (isKnock != true) {
let { left, right, top, bottom } = isKnock
let { offsetLeft, offsetTop, offsetHeight, offsetWidth } = div
if (left > 0) {
let _left;
let left1 = offsetLeft - left;
_left = left1 >= 0 ? left1 : _left
div.style.left = _left + 'px'
}
if (right > 0) {
let _right;
let right1 = div1.offsetLeft + div1.offsetWidth + right;
_right = right1 <= body.offsetWidth - offsetWidth ? right1 : _right
div.style.left = _right + 'px'
}
if (top > 0) {
let _top;
let top1 = offsetTop - top
_top = top1 >= 0 ? top1 : _top
div.style.top = _top + 'px'
}
if (bottom > 0) {
let _bottom;
let bottom1 = div1.offsetTop + div1.offsetHeight + bottom
_bottom = bottom1 <= body.offsetHeight - offsetHeight ? bottom1 : _bottom
div.style.top = _bottom + 'px'
}
}
}
}完整代码
页面拖动和碰撞
1
2
3
参考资料: https://blog.csdn.net/horizon12/article/details/108650346