首先非常感谢网友涛涛的无私分享，此作品是完善了上一款分享的作品（网友涛涛分享原创js实现鼠标绘制层拖拽特效）的鼠标拖拽功能，也是没有用jquery来写的，是利用js面向对象简单模仿实现的，可以在页面的任何空白处绘制一个层，画出来之后可以直接用鼠标拖拽，层可以无限的画，无限的层叠，当鼠标拖动当前层的时候，层就处于被激活状态，会置于最顶层，用鼠标任意的拖拽。
拖拽代码如下：
_down:function(){
var _self=this;
document.onmousedown=function(e){
var evt=window.event || e
,oDiv=document.createElement('div');
_self.startX=evt.clientX;
_self.startY=evt.clientY;
_self.iScrollTop=document.documentElement.scrollTop || document.body.scrollTop;
_self.iScrollLeft=document.documentElement.iScrollLeft || document.body.scrollLeft;
oDiv.className='div';
oDiv.style.left=_self.startX+_self.iScrollLeft+'px';
oDiv.style.top=_self.startY+_self.iScrollTop+'px';
oDiv.style.zIndex=window.zIndex++;
document.body.appendChild(oDiv);
_self.oDiv=oDiv;
_self._move();
_self._up();
this.setCapture && this.setCapture();
return false;
}
},
_move:function(f,o){
var _self=this;
document.onmousemove=function(e){
var evt=window.event || e,endX=evt.clientX-_self.startX,endY=evt.clientY-_self.startY;
if(!f){
_self.oDiv.style.width=Math.abs(endX)+'px';
_self.oDiv.style.height=Math.abs(endY)+'px';
_self.oDiv.style.left=endX< 0 ? (evt.clientX+_self.iScrollLeft)+'px' : (_self.startX+_self.iScrollLeft)+'px';
_self.oDiv.style.top=endY< 0 ? (evt.clientY+_self.iScrollTop)+'px' : (_self.startY+_self.iScrollTop)+'px';
}
else
{
o.style.left=endX+_self.iScrollLeft+'px';
o.style.top=endY+_self.iScrollTop+'px';
}
return false;
}
},
_up:function(f){
var _self=this;
document.onmouseup=function(){
if(!f){
var ofianlDiv=document.createElement('div');
ofianlDiv.style.left=_self.oDiv.style.left;
ofianlDiv.style.top=_self.oDiv.style.top;
ofianlDiv.style.width=_self.oDiv.style.width;
ofianlDiv.style.height=_self.oDiv.style.height;
ofianlDiv.className='ok';
ofianlDiv.style.zIndex=window.zIndex++;
document.body.removeChild(_self.oDiv);
document.body.appendChild(ofianlDiv);
_self.ok.push(ofianlDiv);
_self._divDow();
}
document.onmousemove=document.onmouseup=null;
_self.releaseCapture && _self.releaseCapture();
}
}
效果如下：
如果您觉得本作品对您的学习有所帮助：
关键字：
网友涛涛 绘制图形 层特效 拖拽