盒子拖拽效果，原生js实现
Posted 刘昕hrf
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了盒子拖拽效果，原生js实现相关的知识，希望对你有一定的参考价值。
原生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>hello2</title>
</head>
<style>
#box1
position: absolute;
width: 100px;
height: 100px;
background: blue;
cursor: move;
</style>
<body>
<div id="box1">
</div>
</body>
</html>
<script type="text/javascript">
// 拖拽box1元素
// 拖拽的流程
// 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
// 2。当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
// 3。当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
window.onload = function()
//获取box1
var box1 = document.getElementById("box1");
//为box1绑定一个鼠标按下事件/
//当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
box1.onmousedown = function(event)
//设置box1捕获所有鼠标按下的事件
// if(box1.setCapture)
// box1.setCapture();
//
// box1.setCapture && box1.setCapture();
var event = event || window.event;
//div的偏移量 鼠标clentX- 元素.offsetLeft
//div的偏移量 鼠标.clentY - 元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
//为document绑定一个onmousemove事件
document.onmousemove = function(event)
var event = event || window.event;
//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
//获取鼠标的坐标
var left = event.clientX -ol;
var top = event.clientY- ot;
//修改box1的位置
box1.style.left = left+"px";
box1.style.top = top+"px";
;
//为元素绑定一个鼠标松开事件
document.onmouseup = function(event)
//当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
//取消document的onmousemove事件
this.onmousemove = null;
//取消document的onmouseup事件
this.onmouseup = null;
console.log("nihao");
//当鼠标松开时，取消对事件的捕获
// box1.releaseCapture();
// box1.releasePointerCapture && box1.releasePointerCapture();
;
//当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false来取消默认行为
//不这对IE8不起作用
return false;
;
;
</script>
以上是关于盒子拖拽效果，原生js实现的主要内容，如果未能解决你的问题，请参考以下文章