JavaScript拖动div元素详解

快乐打工仔 分类:实例代码

本章节分享一段代码实例,实现了div元素的基本拖动效果。

下面就详细介绍一下它的实现过程,需要的朋友可以做一下参考。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style type="text/css">
#antzone{
  position:absolute;
  width:150px;
  height:150px;
  background-color:green;
}
</style>
<script type="text/javascript">
function drag(obj){
  if(typeof obj=="string"){
    var obj = document.getElementById(obj);
    obj.orig_index=obj.style.zIndex;
  }
  obj.onmousedown=function(ev){
    this.style.cursor="move";
    this.style.zIndex=1000;
    var ev=window.event||ev;
 
    var x=ev.clientX-obj.offsetLeft+(document.documentElement.scrollLeft||document.body.scrollLeft);
    var y=ev.clientY-obj.offsetTop+(document.documentElement.scrollTop||document.body.scrollTop);
 
    document.onmousemove=function(ev){
      var ev=window.event||ev;
      obj.style.left=(ev.clientX-x+document.documentElement.scrollLeft||document.body.scrollLeft)+"px";
      obj.style.top=(ev.clientY-y+document.documentElement.scrollTop||document.body.scrollTop)+"px";
    }
 
    document.onmouseup=function (){
      document.onmousemove=null;
      document.onmouseup = null;
      obj.style.cursor="normal";
      obj.style.zIndex=obj.orig_index;
    }
  } 
}
window.onload=function(){
  drag("antzone");
}
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面的代码实现了我们的要求,下面介绍一下它的实现过程。

一.代码注释:

(1).function drag(obj){},此函数实现了元素的拖动效果,参数是要拖动元素的id属性值。

(2).if(typeof obj=="string"){

  var obj = document.getElementById(obj);

  obj.orig_index=obj.style.zIndex;

},判断参数是否为字符串。

如果是则获取元素对象。

并且把元素的z-index属性值赋值给元素对象新增属性orig_index。

(3).obj.onmousedown=function(ev){},为元素对象注册onmousedown事件处理函数,参数是事件对象。

(4).this.style.cursor="move",设置鼠标指针的样式,也就是当鼠标按下的时候鼠标指针变成四个箭头形式。

(5).this.style.zIndex=1000,设置d元素z-index属性值为1000,这里就是将z-index设置为一个很大的值,让它在其他元素之上。

(6).var ev=window.event||ev,实现事件对象的浏览器兼容。

(7).var x=ev.clientX-obj.offsetLeft+(document.documentElement.scrollLeft||document.body.scrollLeft),获取鼠标按下时候,鼠标指针距离元素左侧的距离。

(8).var y=ev.clientY-obj.offsetTop+(document.documentElement.scrollTop||document.body.scrollTop),获取鼠标按下时候,鼠标指针距离元素顶部的距离。

(9).document.onmousemove=function(ev){},为文档注册onmousemove事件处理函数。

(10).obj.style.left=(ev.clientX-x+document.documentElement.scrollLeft||document.body.scrollLeft)+"px",设置元素的left属性值。

(11).obj.style.top=(ev.clientY-y+document.documentElement.scrollTop||document.body.scrollTop)+"px",设置元素的top属性值。

(12).document.onmouseup=function (){

  document.onmousemove=null;

  document.onmouseup = null;

  obj.style.cursor="normal";

  obj.style.zIndex=obj.orig_index;

},当鼠标松开的时候,解绑世界处理函数,并且还原鼠标的指针形状和元素的z-index值。

二.相关阅读:

(1).typeof参阅JavaScript typeof一章节。

(2).var ev=window.event||ev参阅var ev=window.event||ev的作用是什么一章节。

(3).clientX参阅JavaScript clientX一章节。

(4).offsetLeft参阅JavaScript offsetLeft一章节。

(5).document.documentElement.scrollLeft||document.body.scrollLeft参阅document.documentElement.scrollTop浏览器兼容一章节。

(6).mousemove参阅JavaScript mousemove事件一章节。

JavaScript拖动div元素详解,这样的场景在实际项目中还是用的比较多的,关于JavaScript拖动div元素详解就介绍到这了。

JavaScript拖动div元素详解属于前端实例代码,有关更多实例代码大家可以查看

回复

我来回复
  • 暂无回复内容