您的位置：首页 > Web前端 > JavaScript

JavaScript实现元素拖动效果

2017-08-23 17:26 603 查看

今天来个大家分享一个有趣的方块拖动效果，代码如下；

---------------------------------分割线----------------------------------

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>move</title>
<script type="text/javascript">
window.onload = function(){

var box = document.getElementById('box');　　//获取要拖动的对象;
Drag(box);　　//调用拖动的函数，传入该对象;

function Drag( obj ){　　//封装一个拖动的函数,并传入拖动的对象;
obj.onmousedown = (evt) => {
var oEvent = evt || event;　　//事件的兼容性;
var disX = oEvent.layerX;    //两种获取方块边界到浏览器边界的距离的方法　1：直接通过layerX,layerY属性;
var disY = oEvent.clientY - obj.offsetTop;　　//2:点击点到浏览器边界的距离减去点击点到方块边界的距离;
document.onmousemove = (evt) => {
var oEvent = evt || event;
obj.style.left = oEvent.clientX - disX + 'px';
obj.style.top = oEvent.clientY - disY + 'px';
};
document.onmouseup = ()=>{
document.onmousemove = null;
document.onmouseup = null;
};
return false;　　//阻止系统默认事件;
};
}

};
</script>
</head>
<body>
<div id="box" style="position:absolute;width:100px;height:100px;background:red;cursor:move;"></div>
</body>
</html>

-------------------------------------------------------------------------------------

下面是拖拽的改进版，限制拖动的范围，只修改Drag函数；代码如下：

-------------------------------------------------------------------------------------

function Drag( obj ){
obj.onmousedown = (evt) => {
var oEvent = evt || event;
var disX = oEvent.layerX;
var disY = oEvent.layerY;
document.onmousemove = (evt) => {
var oEvent = evt || event;
var left = oEvent.clientX - disX;
var top = oEvent.clientY - disY;
if(left < 0){
left = 0;
}else if(left > document.documentElement.clientWidth - box.offsetWidth){
left = document.documentElement.clientWidth - box.offsetWidth;
}
if(top < 0){
top = 0;
}else if(top > document.documentElement.clientHeight - box.offsetHeight){
top = document.documentElement.clientHeight - box.offsetHeight;
}
box.style.left = left + 'px';
box.style.top = top + 'px';
};
document.onmouseup = ()=>{
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
}

----------------------------------------------------------------------

这样就可以吧元素的拖拽限制在浏览器内了，不会跑到外面去；

-----------------------------------------------------------------------

感谢你的阅读，(*^__^*) 嘻嘻……

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航