JS实现图片拖拽交换效果

JS实现图片拖拽交换效果，供大家参考，具体内容如下

听 WEB前端javascript企业实战班 公开课，用JS实现了图片拖拽交换的目的；感谢老师的讲解。

实现要点

注意点

小技巧

实现

HTML

<div id="photo">    <ul>      <li><img src="" alt=""></li>      <li><img src="" alt=""></li>      <li><img src="" alt=""></li>      <li><img src="" alt=""></li>      <li><img src="" alt=""></li>      <li><img src="" alt=""></li>      <li><img src="" alt=""></li>      <li><img src="" alt=""></li>      <li><img src="" alt=""></li>    </ul></div>

CSS

* {      margin:0;      padding: 0;    }    body {      user-select: none;  /*阻止文本选中*/    }    #photo {      width: 600px;      height: 600px;      border: 2px solid #000;      margin: 20px auto;    }    #photo ul li {      list-style:none;      width: 180px;      height: 180px;      margin: 10px;      float: left;    }    #photo ul li:hover {      background: #c0c;    }    #photo ul li img {      width: 180px;      height: 180px;      border: 1px solid #ccc;    }

JS

var photo = document.getElementById("photo");    var oUl = photo.getElementsByTagName("ul")[0];    var aLi = oUl.getElementsByTagName("li");    var z = 2;    var arr = [];    for (var i = 0; i < aLi.length; i++) {      arr.push([aLi[i].offsetLeft, aLi[i].offsetTop]);    }    for (var i = 0; i < aLi.length; i++) {      aLi[i].style.position = "absolute";      aLi[i].style.left = arr[i][0] + "px";      aLi[i].style.top = arr[i][1] + "px";      aLi[i].style.margin = 0;    }    for (var i = 0; i < aLi.length; i++) {      aLi[i].index = i;      drag(aLi[i]);    }    function drag(obj) {      obj.onmousedown = function(ev) {        ev = ev || window.ev;        var x = ev.clientX;        var y = ev.clientY;        var l = obj.offsetLeft;        var t = obj.offsetTop;        this.style.zIndex = z++;        document.onmousemove = function(ev) {          ev = ev || window.ev;          var _left = ev.clientX - x + l;          var _top = ev.clientY - y + t;          obj.style.left = _left + "px";          obj.style.top = _top + "px";          var li = near(obj);          for (var i = 0; i < aLi.length; i++) {            aLi[i].style.background = "";          }          if (li) {            li.style.background = "#DF971F";          }        }        document.onmouseup = function() {          document.onmousemove = null;          document.onmousedown = null;          var nearLi = near(obj);          var tmp = 0;          if (nearLi) {            move(nearLi, {left:arr[obj.index][0], top:arr[obj.index][1]});            move(obj, {left:arr[nearLi.index][0], top:arr[nearLi.index][1]});            nearLi.style.background = "";            tmp = obj.index;            obj.index = nearLi.index;            nearLi.index = tmp;          } else {            move(obj, {left:arr[obj.index][0], top:arr[obj.index][1]});          }        }        return false;      }    }     function impact(obj1, obj2) {      var L1 = obj1.offsetLeft;      var R1 = obj1.offsetLeft + obj1.offsetWidth;      var T1 = obj1.offsetTop;      var B1 = obj1.offsetTop + obj1.offsetHeight;      var L2 = obj2.offsetLeft;      var R2 = obj2.offsetLeft + obj2.offsetWidth;      var T2 = obj2.offsetTop;      var B2 = obj2.offsetTop + obj2.offsetHeight;      if (L2 > R1 || T2 > B1 || R2 < L1 || B2 < T1) {        return false;      } else {        return true;      }    }    function near(obj) {      var tmp = 5000;      var oLi = '';      for (var i = 0; i < aLi.length; i++) {        if (impact(obj, aLi[i]) && obj != aLi[i]) {          var c = disCalc(obj, aLi[i]);          if (tmp > c) {            tmp = c;            oLi = aLi[i];          }        }      }      return oLi;    }    function disCalc(obj1, obj2) {      var x = obj1.offsetLeft - obj2.offsetLeft;       var y = obj1.offsetTop - obj2.offsetTop;      return Math.sqrt(x * x + y * y);    }