JavaScript实现网页元素的拖拽效果
Posted cxchanpin
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript实现网页元素的拖拽效果相关的知识，希望对你有一定的参考价值。
以下的页面中放了两个div，能够通过鼠标拖拽这两个元素到任何位置。
实现该效果的html页面代码例如以下所看到的：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#xixi {
width:200px; height: 200px; position:absolute;
left: 50px; top: 50px; background-color: lightcyan;
}
#haha {
position:absolute; left:300px; top:300px;
background-color: yellow; width:200px; height: 200px;
}
</style>
<script type="text/javascript" src="js/mylib.js"></script>
<script type="text/javascript">
window.onload = function() {
var obj1 = createDraggableObject();
var obj2 = createDraggableObject();
obj1.init($(‘xixi‘));
obj2.init($(‘haha‘));
};
</script>
</head>
<body>
<div id="xixi">Fuck!</div>
<div id="haha">Shit!</div>
</body>
</html>外部JavaScript文件代码例如以下所看到的：
/**
* 依据id获取页面元素
* @param id
* @returns {HTMLElement}
*/
function $(id) {
return document.getElementById(id);
}
/**
* 创建可拖拽对象的工厂方法
*/
function createDraggableObject() {
return {
obj: null, left: 0, top: 0,
oldX: 0, oldY: 0, isMouseLeftButtonDown: false,
init: function (obj) {
this.obj = obj;
var that = this;
this.obj.onmousedown = function (args) {
var evt = args || event;
this.style.zIndex = 100;
that.isMouseLeftButtonDown = true;
that.oldX = evt.clientX;
that.oldY = evt.clientY;
if (this.currentStyle) {
that.left = parseInt(this.currentStyle.left);
that.top = parseInt(this.currentStyle.top);
}
else {
var divStyle = document.defaultView.getComputedStyle(this, null);
that.left = parseInt(divStyle.left);
that.top = parseInt(divStyle.top);
}
};
this.obj.onmousemove = function (args) {
that.move(args || event);
};
this.obj.onmouseup = function () {
that.isMouseLeftButtonDown = false;
this.style.zIndex = 0;
};
},
move: function (evt) {
if (this.isMouseLeftButtonDown) {
var dx = parseInt(evt.clientX - this.oldX);
var dy = parseInt(evt.clientY - this.oldY);
this.obj.style.left = (this.left + dx) + ‘px‘;
this.obj.style.top = (this.top + dy) + ‘px‘;
}
}
};
}以上是关于JavaScript实现网页元素的拖拽效果的主要内容，如果未能解决你的问题，请参考以下文章