JavaScript实现网页元素的拖拽成效
日期：2014-05-16 浏览次数：20323 次
JavaScript实现网页元素的拖拽效果
外部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';
}
}
};
}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
