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

简单几步原生javascript实现元素拖拽功能兼容所有浏览器

2016-09-30 14:54 961 查看

<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>*{margin: 0;padding: 0;}</style>
</head>
<body>
<div id="demo" style="position:absolute;width: 100px;height: 100px;background: #ccc;border:solid 1px #ccc;">按住左键拖动</div>
</body>
<script>
window.onload = function() {
//用于确定是否是拖拽的对象
var drag;
//鼠标位于目标元素上的时候距离目标元素的位置
var x,y;
//取得元素
var ele = document.getElementById('demo');

//鼠标按下去
ele.onmousedown = function(evt) {
//取得事件对象
_event = evt || window.event;
//设置drag元素
target = _event.target || _event.srcElement;
x = _event.clientX - target.offsetLeft;
y = _event.clientY - target.offsetTop;
drag = target;
}

//鼠标移动
document.onmousemove = function(evt) {
//确定鼠标是在目标元素上按下去后才开始移动
if(drag) {
_event = evt || window.event;

//设置边界
var left = _event.clientX - x;
var top = _event.clientY - y;
body = document.documentElement || document.body;
if (left < 0) left = 0;
if (left > body.offsetWidth - drag.offsetWidth) left = body.offsetWidth - drag.offsetWidth;
if (top < 0) top = 0;
if (top > (body.offsetHeight - drag.offsetHeight)) top = (body.offsetHeight - drag.offsetHeight);

//设置样式
drag.style.cursor = 'move';
drag.style.border = 'dashed 1px red';
drag.style.left = left + 'px';
drag.style.top = top + 'px';
}
}

//松开鼠标
document.onmouseup = function(evt) {
if(drag) {
//卸载样式
drag.style.cursor = '';
drag.style.border = 'dashed 1px #ccc';
}
drag = null;
}

}
</script>
</html>

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

标签： javascript js拖拽原生js拖拽拖拽兼容ie

相关文章推荐

新的分享

章节导航