提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

原生javascript实现拖动元素示例代码

JavaScript代码 实现 示例 元素 原生 拖动
2023-06-13 09:15:44 时间

本文介绍原生javascript实现元素拖动。

思路：

1.首先改变被拖动元素的布局属性，关键是“position:absolue”；

2.捕捉鼠标事件"mousedown","mousemove","mouseup"；

3.当触发"mousedown"时，记录下当前鼠标在元素中的相对位置，_x,_y；

4.紧接着处理"mousemove"事件，通过改变元素的top和left属性来移动元素；

5.当触发"mouseup"时间时，终止拖动。

同时，应考虑代码的封装性和浏览器的兼容性，代码如下：

<!DOCTYPEhtml>
<html>
<head>
<title>draggablediv</title>
<styletype="text/css">
body{
margin:0;
padding:0;
background-color:#fff;
}

#drag_div{
width:150px;
height:150px;
padding:10px;
margin:10px;
background-color:#66dd33;
cursor:move;
}
</style>
</head>
</html>
<body>
<divid="drag_div"></div>
</body>
<scripttype="text/javascript">

functionDrag(){
this.initialize.apply(this,arguments);
}

Drag.prototype={

//初始化
initialize:function(element,options){

this.element=this.$(element);//被拖动的对象
this._x=this._y=0;//鼠标在元素中的位置
this._moveDrag=this.bind(this,this.moveDrag);
this._stopDrag=this.bind(this,this.stopDrag);

//设置参数
this.setOptions(options);

//设置鼠标去“拖”的“柄”对象（注意与被拖动的对象区别）
this.handle=this.$(this.options.handle);

//设置回调函数
this.onStart=this.options.onStart;
this.onMove=this.options.onMove;
this.onStop=this.options.onStop;

this.handle.style.cursor="move";

this.changeLayout();

//注册开始拖动事件
this.addHandler(this.handle,"mousedown",this.bind(this,this.startDrag));
},

//改变被拖动对象的布局属性
changeLayout:function(){
this.element.style.top=this.element.offsetTop+"px";
this.element.style.left=this.element.offsetLeft+"px";
this.element.style.position="absolute";
this.element.style.margin="0";
},

startDrag:function(event){
varevent=event||window.event;

this._x=event.clientX-this.element.offsetLeft;
this._y=event.clientY-this.element.offsetTop;

this.addHandler(document,"mousemove",this._moveDrag);
this.addHandler(document,"mouseup",this._stopDrag);

this.preventDefault(event);

this.handle.setCapture&&this.handle.setCapture();

this.onStart();
},
moveDrag:function(event){
varevent=this.getEvent(event);

variTop=event.clientY-this._y;
variLeft=event.clientX-this._x;

this.element.style.top=iTop+"px";
this.element.style.left=iLeft+"px";

this.onMove();
},
stopDrag:function(){

this.removeHandler(document,"mousemove",this._moveDrag);
this.removeHandler(document,"mouseup",this._stopDrag);
this.handle.releaseCapture&&this.handle.releaseCapture();

this.onStop()

},
setOptions:function(options){
this.options={
handle:this.element,//事件对象
onStart:function(){},//开始时回调函数
onMove:function(){},//拖拽时回调函数
onStop:function(){}//停止时回调函数
};
for(varpinoptions){
this.options[p]=options[p];
}
},
$:function(id){
returntypeofid==="string"?document.getElementById(id):id;
},
addHandler:function(element,eventType,handler){
if(element.addEventListener){
returnelement.addEventListener(eventType,handler,false);
}else{
returnelement.attachEvent("on"+eventType,handler);
}
},
removeHandler:function(element,eventType,handler){
if(element.removeEventListener){
returnelement.removeEventListener(eventType,handler,false);
}else{
returnelement.detachEvent("on"+eventType,handler);
}
},
getEvent:function(event){
returnevent||window.event;
},
preventDefault:function(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue=false;
}
},
bind:function(obj,handler){
returnfunction(){
returnhandler.apply(obj,arguments);
}
}
};

window.onload=function(){
vardrag_div=document.getElementById("drag_div");

vardrag=newDrag(drag_div,{handle:drag_div});
}

</script>
</html>

相关文章