本文给大家分享的是使用纯JS实现的简单的拖拽效果的插件，算是对自己javascript学习的一个小的检验，如果小伙伴们需要复杂的拖拽效果，还是考虑jQuery的draggable吧，更成熟一些。
前端开发的时候，有好多地方用到拖拽效果,当然 是个不错的选择,but 我是个打破砂锅问到底的人，抽点时间用js小小的实现了类似的插件，话不多说。
first: html和css
复制代码 代码如下:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
#div1 {
position: absolute;
width: 100px;
height: 100px;
cursor: move;
background-color: red;
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
now,先把主要算法实现一下：
复制代码 代码如下:
<script>
window.onload = function () {
//获取需要拖拽的div
var div1 = document.getElementById("div1");
//添加鼠标按下事件
div1.onmousedown = function (evt) {
var oEvent = evt || event;
//获取按下鼠标到div left top的距离
var distanceX = oEvent.clientX - div1.offsetLeft;
var distanceY = oEvent.clientX - div1.offsetTop;
//添加doc滑动时间
document.onmousemove = function (evt) {
var oEvent = evt || event;
//重新计算div的left top值
var left = oEvent.clientX - distanceX;
var top = oEvent.clientY - distanceY;
//left 当小于等于零时，设置为零 防止div拖出document之外
if (left <= 0) {
left = 0;
}
//当left 超过文档右边界 设置为右边界
else if (left >= document.documentElement.clientWidth - div1.offsetWidth) {
left = document.documentElement.clientWidth - div1.offsetWidth;
}
if (top <= 0) {
top = 0;
}
else if (top >= document.documentElement.clientHeight - div1.offsetHeight) {
top = document.documentElement.clientHeight - div1.offsetHeight;
}
//重新给div赋值
div1.style.top = top + "px";
div1.style.left = left + "px";
}
//添加鼠标抬起事件
div1.onmouseup = function () {
//清空事件
document.onmousemove = null;
div1.onmouseup = null;
}
}
}
</script>
yeah,使用面向对象实现一下
复制代码 代码如下: