拖动控件 javascript原生，兼容IE6-11、chrome、firefox、Opera、Safari
鼠标拖动元素，对于初学者来说，是一个很难的话题，其实只要应用好事件，就能很好的控制拖动的对象,其主要事件是 mousedown，mousemove，mouseup，其原理是在鼠标点击元素时，在给定鼠标的移动事件和鼠标弹起的事件，很多人都习惯，在元素中添加鼠标按下、鼠标移动和鼠标弹起事件，这样多数会造成鼠标拖动过快，元素反而跟不上鼠标，出现脱离鼠标，鼠标弹起也不能定位到指定位置。这样就需要在鼠标按下事件中添加鼠标移动和鼠标弹起事件，（这是我做这个拖动时遇到的问题，如果有什么不对请大家指出！！！）
下面是拖动组件的源码：
<!DOCTYPE HTML>
<html>
<head>
<meta
http-equiv="Content-Type" content="text/html;
charset=utf-8">
<title>darg</title>
</head>
<body>
<script
type="text/javascript">
;var Drag = (function(window){
return
{
init: function(options) {
var defaults=new
Object();
for(elements in
this.defaults){
defaults[elements]=this.defaults[elements]
}
defaults.tDarg=document.getElementById(options.tDarg);
defaults.bDarg=document.getElementById(options.bDarg);
defaults.opacity=options.opacity;
defaults.flag
=
options.flag;
Drag.setCss.call(defaults.tDarg,{"position":"absolute","cursor":"move"});
Drag.setCss.call(defaults.bDarg,{"position":"absolute"});
var
lib =
this;
if(!!defaults.tDarg.addEventListener){
defaults.tDarg.addEventListener("mousedown",function(e){
lib.beforeDrag.call(defaults.bDarg,e,defaults);
window.addEventListener("mousemove",function(e){lib.onDrag.call(defaults.tDarg,e,defaults)},false);
window.addEventListener("mouseup",function(e){lib.endDrag.call(defaults.tDarg,e,defaults)},false);
},false);
}else{
defaults.tDarg.attachEvent("onmousedown",function(e){
lib.beforeDrag.call(defaults.bDarg,e,defaults);
document.attachEvent("onmousemove",function(e){lib.onDrag.call(defaults.tDarg,e,defaults)});
document.attachEvent("onmouseup",function(e){lib.endDrag.call(defaults.tDarg,e,defaults)});
});
}
},
defaults:{
tDarg:null,
bDarg:null,
opacity:
100,
flag:
true,
elem:[],
dowOrUp:false
},
setCss:
function(cObj){
for(var c in
cObj){
this.style[c]=cObj[c];
}
},
setOpacity:
function(opacity){
if(window.addEventListener){
this.style.opacity
= opacity / 100;
}else{
this.filters.alpha.opacity =
opacity;
}
},
beforeDrag:
function(e,objdefaule){
var e = e ||
window.event;
if(objdefaule.elem.length>1) return
;
if((window.addEventListener && e.button==0) ||
(!window.addEventListener && e.button==1)){
if
(e.preventDefault)
{
e.preventDefault();
e.stopPropagation();
}
objdefaule.dowOrUp=true;
var
clone=this.cloneNode(true);
clone.style.zIndex=Drag.getZIndex();
this.style.zIndex=Drag.getZIndex()+1;
clone.removeAttribute("id");
this.parentNode.appendChild(clone);
Drag.setOpacity.call(this,objdefaule.opacity);
objdefaule.elem.push({lib:this,obj:clone,startX:e.clientX,startY:e.clientY,startLeft:this.offsetLeft,startTop:this.offsetTop});
}
},
onDrag:
function(e,objdefaule){
var e = e ||
window.event;
if(!window.addEventListener){
e.returnValue =
false;
}
if(objdefaule.dowOrUp){
for(var i=0;
i<objdefaule.elem.length;
i++){
objdefaule.elem[i].lib.style.left=e.clientX-objdefaule.elem[i].startX+objdefaule.elem[i].startLeft+
"px";
objdefaule.elem[i].lib.style.top
=e.clientY-objdefaule.elem[i].startY+objdefaule.elem[i].startTop
+"px";
}
}
},
endDrag:
function(e,objdefaule){
if(objdefaule.dowOrUp){
var
i=0;
while(objdefaule.elem.length>0){
objdefaule.elem[i].obj.style.left=objdefaule.elem[i].lib.style.left;
objdefaule.elem[i].obj.style.top
=objdefaule.elem[i].lib.style.top;
Drag.setOpacity.call(Drag.defaults.elem[i].lib,100)
objdefaule.elem[i].obj.parentNode.removeChild(objdefaule.elem[i].obj)
objdefaule.elem.shift();
}
Drag.defaults.dowOrUp=false;
}
},
getZIndex:
function(){
var zindex = 1;
var div =
document.getElementsByTagName("DIV");
for(var i = 0 ;i <
div.length;
i++){
if(parseInt(zindex)<parseInt(div[i].style.zIndex)){
zindex=parseInt(div[i].style.zIndex);
}
}
return
parseInt(zindex);
}
}
})(window);
window.onload=function(){
Drag.init({tDarg:"objtitle2",bDarg:"objbody2",opacity:
50, flag:
true});
Drag.init({tDarg:"objtitle3",bDarg:"objbody3",opacity: 50,
flag: true});
Drag.init({tDarg:"objtitle",bDarg:"objbody",opacity: 50,
flag: true});
Drag.init({tDarg:"objtitle4",bDarg:"objbody4",opacity:
50, flag: true});
}
</script>
<div id="objbody4"
style="filter:alpha(opacity=100);opacity:1;width:200px;height:150px;
border:1px solid #f00;background:#020200; float:left;
margin-left:-10px">
<div id="objtitle4"
style="background-color:#f00;width:200px;
height:30px;background:#f0f">biaoti1</div>
</div>
<div id="objbody"
style="filter:alpha(opacity=100);opacity:1;width:198px; height:150px;
border:1px solid #06C;
border-top:0;position:fixed;left:600px;">
<div id="objtitle"
style="background-color:#06C;width:200px; height:30px;position:fixed;
">biaoti2</div>
</div>
<div id="objbody3"
style="filter:alpha(opacity=100);opacity:1;width:198px; height:150px;
border:1px solid #00f; border-top:0;
position:relative;left:200px;">
<div id="objtitle3"
style="background-color:#00f;width:200px;
height:30px;position:relative;">biaoti3</div>
</div>
<div id="objbody2"
style="filter:alpha(opacity=100);opacity:1;width:198px; height:150px;
border:1px solid #f00; border-top:0;
position:absolute;left:400px">
<div id="objtitle2"
style="background-color:#f00;width:200px;
height:30px;position:absolute;">biaoti4</div>
</div>
<div style="position:absolute">
</div>
</body>
</html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
