元素拖动实现

最新推荐文章于 2024-09-11 10:10:41 发布

VVVGG

最新推荐文章于 2024-09-11 10:10:41 发布

阅读量272

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/VVVZCS/article/details/82193322

版权

JavaScript 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>VVVGG</title>
	<link rel="stylesheet" type="text/css" href="lesson1.css">
	<script src="jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div style="width: 50px;height: 50px;background-color: red;position: absolute;left: 0;top: 0;"></div>
</body>
<script src="lesson.js" type="text/javascript" charset="utf-8">
</script>
</html>

var div = document.getElementsByTagName('div')[0];
var disX,
	disY;
function elemDrag(elem) {
	addEvent(elem, 'mousedown', mousedown);
	function mousedown(event) {
		var e = event || window.event;
		disX = e.pageX - parseInt(elem.style.left);
		disY = e.pageY - parseInt(elem.style.top);
		addEvent(document, 'mousemove', mousemove);
		addEvent(document, 'mouseup', mouseup);
	}
	function mousemove(event) {
		var e = event || window.event;
		elem.style.left = e.pageX - disX + 'px';
		elem.style.top = e.pageY - disY + 'px';
	}
	function mouseup() {
		removeEvent(document, 'mousemove', mousemove);
	}
}
//针对不同浏览器，绑定事件函数
function addEvent (elem, type, handle) {
	if(elem.addEventListener) {
		elem.addEventListener(type, handle, false);
	}else if(elem.attachEvent){
		elem.attachEvent('on' + type, function () {
			handle.call(elem);
		})
	}else{
		elem['on' + type] = handle;
	}
}
//针对不同浏览器，解除绑定事件函数
function removeEvent (elem, type, handle) {
	if(elem.removeEventListener) {
		elem.removeEventListener(type, handle, false);
	}else if(elem.detachEvent) {
		elem.detachEvent('on' + type, function () { handle.call(elem); });
	}else{
		elem['on' + type] = null;
	}
}
elemDrag(div);