JS实现拖拽元素+封装拖拽方法
拖拽元素：实现拖拽元素+封装拖拽方法
拖拽元素
实现拖拽元素
使用原始鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
这是一行文本
<div id="box"></div>
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById('box')
drag(box)
}
// 拖拽函数
/**
* drag(box)
* box 拖拽对象（可以是任何元素节点）
*/
function drag(box) {
box.onmousedown = function () {
box.setCapture && box.setCapture() // 设置在鼠标按下时box捕获所有点击事件 setCapture在ie中生效
// 鼠标按下事件
console.log('鼠标按下')
var ol = event.clientX - box.offsetLeft // 求鼠标到box左边的距离
var ot = event.clientY - box.offsetTop // 求鼠标到box顶部的距离
document.onmousemove = function (event) {
// 注意事件是绑给document的
// 鼠标拖动事件
console.log('鼠标移动')
event = event || window.event // 拿到鼠标事件
var left = event.clientX - ol // 鼠标当前坐标 - 鼠标在box中的偏离量 = box的坐标
var top = event.clientY - ot
box.style.left = left + 'px' // 将鼠标坐标赋值给box的位置属性
box.style.top = top + 'px'
console.log(box.style.left, box.style.top)
return false // 取消拖拽后 浏览器的默认搜索事件
}
document.onmouseup = function () {
// 鼠标抬起事件绑在document上，目的是为了防止box上面有元素遮罩，box的鼠标抬起事件失效
document.onmousemove = null // 取消onmousemove事件
document.onmouseup = null // 取消鼠标的onmouseup事件
box.releaseCapture && box.releaseCapture() // 设置在鼠标抬起时box释放捕获的所有点击事件 releaseCapture在ie中生效
}
}
}
</script>
</body>
</html>
使用 H5 draggable 属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
#box1 {
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
}
</style>
</head>
<body>
这是一行文本
<div id="box1" draggable="true" style="top: 300px; left: 300px;"></div>
<!-- 设置属性draggable=true，元素变为可拖动元素 -->
<script type="text/javascript">
window.onload = function () {
var box = document.getElementById('box')
var box1 = document.getElementById('box1')
drag(box)
var ol, ot
// 开始拖拽时计算鼠标相对box的偏移量
box1.ondragstart = function () {
var ol = event.clientX - box1.offsetLeft // 求鼠标到box左边的距离
var ot = event.clientY - box1.offsetTop // 求鼠标到box顶部的距离
}
// 拖拽结束时计算box的位置
box1.ondragend = function () {
console.log('拖拽结束')
var left = event.clientX - ol // 鼠标当前坐标 - 鼠标在box中的偏离量 = box的坐标
var top = event.clientY - ot
box1.style.left = left + 'px' // 将鼠标坐标赋值给box的位置属性
box1.style.top = top + 'px'
}
}
</script>
</body>
</html>
封装拖拽方法
// 封装拖拽方法
/**
* drag(box)
* box 拖拽对象（可以是任何元素节点）
*/
function drag(box) {
// 鼠标按下事件
box.onmousedown = function () {
box.setCapture && box.setCapture() // 设置在鼠标按下时box捕获所有点击事件，setCapture在ie中生效
console.log('鼠标按下')
var ol = event.clientX - box.offsetLeft // 求鼠标到box左边的距离
var ot = event.clientY - box.offsetTop // 求鼠标到box顶部的距离
// 鼠标拖动事件，注意事件是绑给document的
document.onmousemove = function (event) {
console.log('鼠标移动')
event = event || window.event // 拿到鼠标事件
var left = event.clientX - ol // 鼠标当前坐标 - 鼠标在box中的偏离量 = box的坐标
var top = event.clientY - ot
box.style.left = left + 'px' // 将鼠标坐标赋值给box的位置属性
box.style.top = top + 'px'
console.log(box.style.left, box.style.top)
return false // 取消拖拽后 浏览器的默认搜索事件
}
document.onmouseup = function () {
// 鼠标抬起事件绑在document上，目的是为了防止box上面有元素遮罩，box的鼠标抬起事件失效
document.onmousemove = null // 取消onmousemove事件
document.onmouseup = null // 取消鼠标的onmouseup事件
box.releaseCapture && box.releaseCapture() // 设置在鼠标抬起时box释放捕获的所有点击事件 releaseCapture在ie中生效
}
}
}
