JS實現(xiàn)圖片拖拽交換效果，供大家參考，具體內(nèi)容如下

聽 WEB前端javascript企業(yè)實戰(zhàn)班 公開課，用JS實現(xiàn)了圖片拖拽交換的目的；感謝老師的講解。

實現(xiàn)要點

注意點

小技巧

實現(xiàn)

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);    }