js實現的通過拖動調整元素間的相對位置程式碼例項

antzone發表於2017-04-02
JS

本章節分享一段程式碼例項，它實現了拖動元素就能夠調整元素間相對位置的功能。

非常的使用，本來想詳細分析一下它的實現過程，但是程式碼實在是太長了，那樣的話文章的篇幅真的不知道要多大。

所以還是放棄了，如果有任何問題可以跟帖留言，本站會在第一時間進行回覆。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
*{
  margin:0px;
  padding:0px;
}
body{
  position:relative;
  width:780px;
  height:900px;
  border:1px solid #999;
}
.drag{
  width:200px;
  height:100px;
  border:1px solid #000;
  margin:20px;
  background:#fff
}
.drag h1{
  margin:0px;
  padding:0px;
  font-size:12px;
  height:18px;
  line-height:18px;
  background:#E0E7F3;
  text-indent:20px;
  cursor:move;
}
.center{
  margin:200px;
  border:3px solid red
}
</style>
<script type="text/javascript">
var DragZindexNumber=0;
function drag(obj){
  var ox,oy,ex,xy,tag=0,mask=0;
  if(tag==0){
    obj.onmousedown=function(e){   
      if(mask==1){
            return; 
          }
      obj.style.zIndex=DragZindexNumber++;
      transp(obj,"start")
      tag=1;
      var e = e||window.event; 
      ex=getEventOffset(e).offsetX;
      ey=getEventOffset(e).offsetY;
      ox=parseInt(obj.offsetLeft);
      oy=parseInt(obj.offsetTop);
      tempDiv=document.createElement("div"); 
      with(tempDiv.style){
        width=obj.offsetWidth+"px";
        height=obj.offsetHeight+"px";
        border="1px dotted red";
        position="absolute";
        left=obj.offsetLeft+"px";
        top=obj.offsetTop+"px";
        zIndex=999;
      }
      document.body.appendChild(tempDiv);
      this.ele=tempDiv;
      fDragStart(tempDiv);
      document.body.onmousemove=function(e){
        if(tag==1){ 
          var e=e||window.event;
          tempDiv.style.left=parseInt(e.clientX)-ex+"px";
          tempDiv.style.top=parseInt(e.clientY)-ey+"px";
        }
        else{
              if(!tempDiv==null)tempDiv.parentNode.removeChild(tempDiv)
            }
      }
      tempDiv.onmouseup=function(e){
        var e=e||window.event;
        fDragEnd(tempDiv);
        obj.style.position="absolute";
        movie(obj,parseInt(e.clientX)-ex-19,parseInt(e.clientY)-ey-20);
        tempDiv.parentNode.removeChild(tempDiv);
        tag=0;
      }
    }
  }
}
function movie(o,l,t){
  var a=1;
  mask=1;
  var ol=parseInt(o.offsetLeft);
  var ot=parseInt(o.offsetTop);
  var iTimer=setInterval(function(){
    if(a==10){
      transp(o,"end");
      mask=0;
      clearInterval(iTimer);
    }
    o.style.left=ol+a*(l-ol)/10+"px";
    o.style.top=ot+a*(t-ot)/10+"px";
    a++;
  },20);
}
function fCancleBubble(e){
  var e = window.event || e;
  if (e.preventDefault) e.preventDefault();
  else e.returnValue = false;
}
function transp(o,mode){
  if(mode=="start"){
    if(document.all){
      o.style.filter = "Alpha(Opacity=50)";
    }
        else{
      o.style.opacity = 0.5;
    }
  }
  else {
    if(document.all){
      o.style.filter = "Alpha(Opacity=100)";
    }
        else{
      o.style.opacity = 1;
    }
  }
}
function getOffset(evt){
  var target = evt.target;
  if (target.offsetLeft == undefined){
    target = target.parentNode;
  }
  var pageCoord = getPageCoord(target);
  var eventCoord ={
    x: window.pageXOffset + evt.clientX,
    y: window.pageYOffset + evt.clientY
  };
  var offset ={
    offsetX: eventCoord.x - pageCoord.x,
    offsetY: eventCoord.y - pageCoord.y
  };
  return offset;
}
function getPageCoord(element){
  var coord = {x: 0, y: 0};
  while (element){
    coord.x += element.offsetLeft;
    coord.y += element.offsetTop;
    element = element.offsetParent;
  }
  return coord;
}
function getEventOffset(evt){
  var msg = "";
  if (evt.offsetX == undefined){
    var evtOffsets = getOffset(evt);
    msg={offsetX:evtOffsets.offsetX,offsetY:evtOffsets.offsetY};
  }
  else{
    msg={offsetX:evt.offsetX,offsetY:evt.offsetY};
  }
  return msg;
}
function fDragStart(XEle){
 switch(fCkBrs()){
   case 3:
    window.getSelection().removeAllRanges();
    break;
     
   default:
    XEle.setCapture();
    break;
  }
}
function fDragEnd(XEle){
  switch(fCkBrs()){
    case 3:
      window.getSelection().removeAllRanges();
      break;
   default:
     XEle.releaseCapture();
     break;
  }
}
function fCkBrs(){
  switch (navigator.appName){
    case 'Opera': return 2;
    case 'Netscape': return 3;
    default: return 1;
  }
} 
window.onload=function(){
  var element=document.getElementsByTagName("div");
  for(var i=0;i<element.length;i++){
    if(element[i].className=="drag"){
      drag(element[i])
        }
  }
}
</script>
</head>
<body>
<div class="drag" >
  <h1><strong>softwhy.com</strong></h1>
</div>
<div class="drag" >
  <h1>anzone</h1>
</div>
<div class="drag" >
  <h1><strong>螞蟻部落</strong></h1>
</div>
<div class="drag">
  <h1>模組一</h1>
</div>
<div class="drag">
  <h1>模組二</h1>
</div>
<div class="drag">
  <h1>模組三</h1>
</div>
<div class="drag">
  <h1>模組四</h1>
</div>
</body>
</html>

相關文章