Javascript*拖拽类
基本拖拽
| 1 2 3 4 5 6 7 8 9 |
new Dragdrop({
target 拖拽元素 HTMLElemnt 必选
bridge 指定鼠标按下哪个元素时开始拖拽，实现模态对话框时用到
dragable 是否可拖拽 (true)默认
dragX true/false false水平方向不可拖拽 (true)默认
dragY true/false false垂直方向不可拖拽 (true)默认
area [minX,maxX,minY,maxY] 指定拖拽范围 默认任意拖动
callback 拖拽过程中的回调函数
});
|
jQuery插件
拖拽示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
}
#div2{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
left: 500px;
top: 200px;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
<script>
const div1 = document.getElementById('div1')
const div2=document.getElementById('div2')
function crash(obj1,obj2) {
if(obj1.offsetLeft+obj1.offsetWidth<obj2.offsetLeft||
obj2.offsetLeft+obj2.offsetWidth<obj1.offsetLeft||
obj1.offsetTop+obj1.offsetHeight<obj2.offsetTop||
obj2.offsetTop+obj2.offsetHeight<obj1.offsetTop)
return false
return true
}
function move(obj) {
obj.onmousedown = function (event) {
const chaX = event.clientX - obj.offsetLeft
const chaY = event.clientY - obj.offsetTop
document.onmousemove = function (event) {
obj.style.left = event.clientX - chaX + 'px'
obj.style.top = event.clientY - chaY + 'px'
console.log(crash(div1,div2))
}
document.onmouseup = function () {
document.onmousemove = null
}
}
}
move(div1)
move(div2)
</script>