js通過拖動調整元素位置程式碼例項

admin發表於2017-04-15
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: 0;
  padding: 0;
  -moz-user-select: none;
}
body {
  font-size: 16px;
}
ul {
  margin: 5px 100px;
  list-style: none;
}
li {
  width: 193px;
  height: 40px;
  line-height: 40px;
  padding: 0;
  list-style: none;
  text-align: center;
  float: left;
  transition: all 0.1s ease-in-out;
}
li:hover {
  background: #bdb76b;
  cursor: move;
}
</style>
</head>
<body>
<ul id="outer_wrap">
  <li>螞蟻部落一</li>
  <li>螞蟻部落二</li>
  <li>螞蟻部落三</li>
  <li>螞蟻部落四</li>
  <li>螞蟻部落五</li>
  <li>螞蟻部落六</li>
</ul>
<script type="text/javascript">
var color = ["#FFF8DC", "##FFEFDB", "#FFE7BA", "#FFE1FF", "#FFD39B", "#FFBBFF", "#FFAEB9", "#FF8C69", "#FF8247"];
var opacity = [0.5, 0.6, 0.7];
 
function $(id) {
  return document.getElementById(id);
}
//獲取滑鼠位置
function getMousePos(e) {
  return {
    x: e.pageX || e.clientX + document.body.scrollLeft,
    y: e.pageY || e.clientY + document.body.scrollTop
  }
}
//獲取元素位置
function getElementPos(el) {
  return {
    x: el.offsetParent ? el.offsetLeft + arguments.callee(el.offsetParent)['x'] : el.offsetLeft,
    y: el.offsetParent ? el.offsetTop + arguments.callee(el.offsetParent)['y'] : el.offsetTop
  }
}
//獲取元素尺寸
function getElementSize(el) {
  return {
    width: el.offsetWidth,
    height: el.offsetHeight
  }
}
//禁止選擇
document.onselectstart = function() {
    return false;
  }
  //判斷是否有挪動
var MOVE = {};
MOVE.isMove = false;
 
//就是建立的標杆
var div = document.createElement('div');
div.style.width = "193px";
div.style.height = '1px';
div.style.fontSize = '0';
div.style.background = 'red';
div1 = div.cloneNode(true);
div1.style.background = "blue";
var outer_wrap = $('outer_wrap');
 
outer_wrap.onmousedown = function(event) {
  //獲取列表順序
  var lis = outer_wrap.getElementsByTagName('li');
  for (var i = 0; i < lis.length; i++) {
    lis[i].index = i;
  }
  for (var i = 0; i < lis.length; i++) {
    lis[i]['pos'] = getElementPos(lis[i]);
    lis[i]['size'] = getElementSize(lis[i]);
    lis[i].style.background = color[i];
    lis[i].style.opacity = opacity[i % 3];
    lis[i].onmousedown = function() {
      outer_wrap.insertBefore(div1, this);
      div1.style.margin = "0 0 0 " + this.index * 193 + "px";
      this.style.color = "red";
    }
  }
  event = event || window.event;
  var t = event.target || event.srcElement;
  if (t.tagName.toLowerCase() == 'li') {
    var p = getMousePos(event);
    var el = t.cloneNode(true);
    el.style.position = 'absolute';
    el.style.left = t.pos.x + 'px';
    el.style.top = t.pos.y + 'px';
    el.style.width = t.size.width + 'px';
    el.style.height = t.size.height + 'px';
    el.style.border = '1px solid #d4d4d4';
    el.style.background = '#d4d4d4';
    el.style.opacity = '0.7';
    document.body.appendChild(el);
 
    document.onmousemove = function(event) {
        event = event || window.event;
        var current = getMousePos(event);
        el.style.left = t.pos.x + current.x - p.x + 'px';
        el.style.top = t.pos.y + current.y - p.y + 'px';
        document.body.style.cursor = 'move';
 
        //判斷插入點
        for (var i = 0; i < lis.length; i++) {
          if (current.x >= lis[i]['pos']['x'] && current.x <= lis[i]['pos']['x'] + lis[i]['size']['width']) {
            if (t != lis[i] || current.x > i * 193) {
              MOVE.isMove = true;
              s = lis[i];
              div.style.margin = "0 0 0 " + i * 193 + "px";
              outer_wrap.insertBefore(div, lis[i]);
            }
 
          }
        }
      }
      //移除事件
    document.onmouseup = function(event) {
      event = event || window.event;
      document.onmousemove = null;
      if (MOVE.isMove) {
        outer_wrap.replaceChild(t, div);
        outer_wrap.replaceChild(s, div1);
        MOVE.isMove = false;
      }
      document.body.removeChild(el);
      el = null;
      document.body.style.cursor = 'normal';
      document.onmouseup = null;
    }
  }
}
</script>
</body>
</html>

相關文章