一、HTML
<!DOCTYPE html>
<html>
<head>
<title>drag demo</title>
<style>
#drag{
width: 400px;
height: 400px;
background-color:green;
}
</style>
</head>
<body>
<div id="drag"></div>
<script type="text/javascript" src="./drag.js"></script>
<script type="text/javascript">
new Drag('drag');
</script>
</body>
</html>
二、javascript
(function(){
//私有变量transform
var transform=getTransform();
//获取浏览器支持的transform写法
function getTransform(){
var tranform='';
var divStyle=document.createElement('div').style;
var transformArr=['transform','webkitTransform','MozTransform','msTransform'];
var len=transformArr.length;
for(var i=0;i<len;i++){
if(transformArr[i] in divStyle){
return transform=transformArr[i];
}
}
return transform;
}
//构造函数
function Drag(selector){
//每个实例单独拥有的属性
this.elem = typeof selector=='Object' ? selector : document.getElementById(selector);
this.startX=0;
this.startY=0;
this.targetX=0;
this.targetY=0;
this.init(); //初始化，主要给drag对象添加mousedown事件监听
}
Drag.prototype={
constructor:Drag,
init:function(){
this.setDrag();
},
//获取元素某个样式
getStyle:function(property){
return document.defaultView.getComputedStyle ?document.defaultView.getComputedStyle(this.elem,false)[property] : this.elem.currentStyle[property]
},
//获取元素当前位置
getPosition:function(){
var pos={x:0,y:0};
if(transform){ //浏览器支持transform
var transformValue=this.getStyle(transform);
if(transformValue=="none"){ //如果没有transform的值
this.elem.style[transform]='translate(0,0)';
return pos;
}
else{
var tmp=transformValue.match(/-?\d+/g);
return pos={
x:parseInt(tmp[4].trim()),
y:parseInt(tmp[5].trim())
}
}
}
else{ //浏览器不支持transform
if(getStyle(elem,'position')=='static'){ //如果是静态定位，变为relative定位
elem.style.position='relative';
return pos;
}
else{
var x=parseInt(getStyle(elem,'left') ? getStyle(elem,'left') : 0);
var y=parseInt(getStyle(elem,'top') ? getStyle(elem,'top') : 0);
return pos={
x : x,
y : y
}
}
}
},
// 用来设置当前元素的位置
setPosition:function(pos){
if(transform){
this.elem.style[transform]='translate('+pos.x+'px,'+pos.y+'px)';
}
else{
this.elem.style.left=pos.x+'px';
this.elem.style.top=pos.y+'px';
}
},
// 用来绑定事件
setDrag:function(){
var self=this; //将this保存起来，因为在addEventListener的回调函数中，this指向的target，而IE9以前this指向的是window
this.elem.addEventListener('mousedown',start,false);
function start(event){
//获取鼠标的初始位置
self.startX=event.pageX;
self.startY=event.pageY;
//获取目标元素的初始位置
var pos=self.getPosition();
self.targetX=pos.x;
self.targetY=pos.y;
document.addEventListener('mousemove',move,false);
document.addEventListener('mouseup',stop,false);
}
function move(event){
//获取鼠标的当前位置
var currentX=event.pageX;
var currentY=event.pageY;
//计算差值
var distanceX=currentX-self.startX;
var distanceY=currentY-self.startY;
//设置元素的当前位置
self.setPosition({
x:(self.targetX+ distanceX).toFixed(),
y:(self.targetY+distanceY).toFixed()
});
}
function stop(event){
document.removeEventListener('mousemove',move);
document.removeEventListener('mouseup',stop);
}
}
}
window.Drag = Drag;
})();
缺点：mousemove触发的事件函数move()应该节流
网友评论