当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS实现图片拖拽交换效果

JS实现图片拖拽交换效果

2018年12月05日  | 移动技术网IT编程  | 我要评论

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

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

实现要点

  • 鼠标点击onmousedown：获取鼠标在页面上可视区域的位置(clientx, clienty)和元素外边框距已定位父元素容器的位置(offsetleft,offsettop)；
  • 鼠标移动onmousemove: 获取鼠标在页面上可视区域的位置(clientx, clienty),并实时改变目标元素位置；进行碰撞检测，同时计算被碰撞元素与目标元素中心点距离，将距离最小的定位交换元素；
  • 鼠标释放onmouseup: 进行元素交换

注意点

  • 排除没有碰撞成功的情况，进行特殊讨论；
  • 覆盖html5原有的图片拖拽功能，通过return false返回；
  • 交换时同时勿忘记交换图片的索引；

小技巧

  • 进行碰撞检测时，可以进行逆向思维，检测未碰撞的情况，即判断目标元素是否超过碰撞元素的边界(如：目标元素的右侧是否超过被碰撞元素的左侧)
  • 计算元素中心位置时，可以改为计算元素左上角之间的距离，从而转变为计算(offsetleft1,offsettop1)(offsetleft1,offsettop1)与(offsetlefti(offsetlefti, offsettopi)offsettopi)的距离,以简化计算；

实现

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

move.js

function move(obj, json, endfn) {
  clearinterval(obj.timer);
  obj.timer = setinterval(function() {
    var bbtn = true;
    for (var attr in json) {
      var icur = 0;
      if (attr == 'opacity') {
        if (math.round(parsefloat(getstyle(obj,attr)) * 100) == 0) {
          icur = math.round(parsefloat(getstyle(obj,attr)) * 100);
        } else {
          icur = math.round(parsefloat(getstyle(obj,attr)) * 100) || 100;
        }  
      } else {
        icur = parseint(getstyle(obj,attr)) || 0;
      }

      var ispeed = (json[attr] - icur) / 8;
      ispeed = ispeed >0 ? math.ceil(ispeed) : math.floor(ispeed);
      if (icur != json[attr]) {
        bbtn = false;
      }

      if (attr == 'opacity') {
        obj.style.filter = 'alpha(opacity=' +(icur + ispeed)+ ')';
        obj.style.opacity = (icur + ispeed) / 100;
      }
      else {
        obj.style[attr] = icur + ispeed + 'px';
      }
    }

    if (bbtn) {
      clearinterval(obj.timer);
      if (endfn) {
        endfn.call(obj);
      }
    }  
  }, 30);
}


function getstyle(obj, attr) { 
  if (obj.currentstyle) {
    return obj.currentstyle[attr];
  } else {
    return getcomputedstyle(obj, false)[attr];
  }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网