touch事件使图片发生移动

目的

为了完成一个移动端的小功能，基于jq的简易dome

结构

<div class="mask-layer">
<div class="mask-layer-black"></div>
<div class="mask-layer-container">
<div class="mask-layer-imgbox">
<div class="mask-layer-imgName" style="bottom: 0px;"></div>
<div class="layer-img-box">
<img src="./static/1_15_220801162845e2ec6d.png" alt=""></div>
</div>
<div class="mask-layer-close">X</div>
<div class="mask-layer-del">-</div>
<div class="mask-layer-add">+</div>
<div class="mask-layer-R">R</div>
<div class="img-pre" style="display: none;"></div>
<div class="img-next" style="display: none;"></div>
<ul class="contextmenu" id="contextmenu">
<li><a class="downimg">下载图片</a></li>
<li><a class="clockwise">顺时针旋转90°</a></li>
<li><a class="counterClockwise">逆时针旋转90°</a></li>
</ul>
</div>
</div>

主要是为了实现layer-img-box中图片进行PC端鼠标按住移动以及移动端触屏目标进行移动，本文章只简单介绍如何实现功能，其他概不讲解~~

JS内容

直接上代码：

/*图片拖拽*/
    var $div_img = $(".layer-img-box img");
    var $div_layer = $(".mask-layer");

    //绑定鼠标左键按住事件
    $div_img.bind("mousedown", function (event) {
      event.preventDefault && event.preventDefault(); //去掉图片拖动响应
      //获取需要拖动节点的坐标
      var offset_x = $(this)[0].offsetLeft; //x坐标
      var offset_y = $(this)[0].offsetTop; //y坐标
      //获取当前鼠标的坐标
      var mouse_x = event.pageX;
      var mouse_y = event.pageY;
      //绑定拖动事件
      //由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素
      $(".layer-img-box").bind("mousemove", function (ev) {
        // 计算鼠标移动了的位置
        var _x = ev.pageX - mouse_x;
        var _y = ev.pageY - mouse_y;
        //设置移动后的元素坐标
        var now_x = offset_x + _x + "px";
        var now_y = offset_y + _y + "px";
        //改变目标元素的位置
        $div_img.css({
          top: now_y,
          left: now_x,
        });
      });
      //当鼠标左键松开，接触事件绑定
      $(".layer-img-box").bind("mouseup", function () {
        $(".layer-img-box").unbind("mousemove");
      });
    });
    //绑定触屏事件
    $div_img.bind("touchstart", function (event) {
      event.preventDefault && event.preventDefault(); //去掉图片拖动响应
      //获取需要拖动节点的坐标
      var offset_x = $(this)[0].offsetLeft; //x坐标
      var offset_y = $(this)[0].offsetTop; //y坐标
      //获取当前鼠标的坐标
      var mouse_x = event.originalEvent.touches[0].pageX;
      var mouse_y = event.originalEvent.touches[0].pageY;
      //绑定拖动事件
      //由于拖动时，可能鼠标会移出元素，所以应该使用全局（document）元素
      $(".layer-img-box").bind("touchmove", function (ev) {
        // 计算鼠标移动了的位置
        var _x = ev.originalEvent.touches[0].pageX - mouse_x;
        var _y = ev.originalEvent.touches[0].pageY - mouse_y;
        //设置移动后的元素坐标
        var now_x = offset_x + _x + "px";
        var now_y = offset_y + _y + "px";
        //改变目标元素的位置
        $div_img.css({
          top: now_y,
          left: now_x,
        });
      });
      //当鼠标左键松开，接触事件绑定
      $(".layer-img-box").bind("touchend", function () {
        $(".layer-img-box").unbind("touchmove");
      });
    });

结束

可以看到鼠标左键按住还是很简单的，但是在移动端的时候如果不了解的情况去使用mouse事件是行不通的，只能使用touch事件了，而touch事件为touchstart开始事件、touchmove移动事件、touchend触屏结束事件，合理的利用他的api即可~~