关于拖拽的JS代码网上的资源已经十分丰富，GISZL写的JS拖拽当然也并没有什么特别的地方，只是个借助OOP实现的简单拖拽。
拖拽的原理其实是数学上向量平移在网页中的应用，原理简单不做解释。具体的请看代码：
File:DragControl.js
/// <reference path="ClassHelper.js" />
/*
作者：GISZL
时间：2011-10-19
修改：无
说明：实现任何HTML元素被拖拽
注释：目前火狐下存在Bug，望高手指教
*/
var DragControl = ClassHelper.create();
ClassHelper.extend(DragControl.prototype, {
dragObject: null,
dragObjectCopy: null,
dragObjectX: 0,
dragObjectY: 0,
mouseDX: 0,
mouseDY: 0,
canMove: false,
isIE: true,
initialize: function(dragObj, initX, initY, initWidth, initHeight) {
this.dragObject = dragObj;
//初始化拖拽元素
this.dragObject.style.left = initX + "px";
this.dragObject.style.top = initY + "px";
this.dragObject.style.position = "absolute";
this.dragObject.style.width = initWidth + "px"
this.dragObject.style.height = initHeight + "px";
this.dragObject.style.zIndex = 1;
//是否IE
this.isIE = document.all ? true : false;
//绑定鼠标事件
var that = this;
this.dragObject.onmousedown = function() {
return that.starDrag.apply(that, arguments);
}
this.dragObject.onmousemove = function() {
return that.drag.apply(that, arguments);
}
this.dragObject.onmouseup = function() {
return that.stopDrag.apply(that, arguments);
}
},
starDrag: function(e) {
this.dragObjectCopy = this.dragObject;
var evt = e || window.event;
if (evt.button == (document.all ? 1 : 0)) {
this.canMove = true;
//鼠标按下时坐标
this.mouseDX = evt.clientX;
this.mouseDY = evt.clientY;
//鼠标按下时拖拽元素的左上角坐标
this.dragObjectX = parseInt(this.dragObject.style.left);
this.dragObjectY = parseInt(this.dragObject.style.top);
if (this.isIE) {
this.dragObject.setCapture();
}
else {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
}
},
drag: function(e) {
if (this.canMove) {
if (this.dragObjectCopy) {
var evt = e || window.event;
//鼠标移动时拖拽元素的左上角坐标
this.dragObject.style.left = this.dragObjectX - this.mouseDX + evt.clientX + "px";
this.dragObject.style.top = this.dragObjectY - this.mouseDY + evt.clientY + "px";
}
}
},
stopDrag: function(e) {
this.canMove = false;
this.dragObjectCopy = null;
if (this.isIE) {
this.dragObject.releaseCapture();
}
else {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
}
});
Example：
File：demo.htm
<head>
<title>JS实例：JavaScript任意元素可拖拽控件</title>
<script src="Js/Common/ClassHelper.js"></script>
<script src="Js/Common/DragControl.js"></script>
</head>
<body>
<div style="background: #666"></div>
</body>
</html>
<script>
var drag = new DragControl(document.getElementById("drag"),100,100,200,200);
</script>
这个拖拽代码写的其实还有问题，我会在不断的学习中不断的完善。
1524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
