搜尋

首頁  >  問答  >  主體

javascript - 手机端怎么实现拖动元素效果?

好像是需要用到touchmove事件,可否贴出代码来参考一下,或者比较好用的插件,谢谢

ringa_leeringa_lee2895 天前285

全部回覆(4)我來回復

  • 巴扎黑

    巴扎黑2017-04-10 15:22:41

    你可以查看jQuery UI Touch Punch, 你会为之惊叹的。
    看这个:http://touchpunch.furf.com/

    回覆
    0
  • ringa_lee

    ringa_lee2017-04-10 15:22:41

    这个元素给absolute
    外层父元素relative
    然后加上touchmove事件,代码很简单啊

    回覆
    0
  • 高洛峰

    高洛峰2017-04-10 15:22:41

    我建议自己写,移动端主要是 通过 touchstart 、touchmove、和 touchend来实现拖动效果。

    可以写这样一段小小的代码 :

    var ele = document.getElementById("drag");

    var moving = function(e){
    /.......

    }
    var mouseup = function(e){
    /.......

    document.removeEventListener("touchmove", moving);
    document.removeEventListener("touchend", mouseup);
    

    }

    ele.addEventListener("touchstart",function(e){

    event.preventDefault();
    item.set_prop("isMoving", true);
    document.addEventListener("touchmove", moving,false);
    document.addEventListener("touchend", mouseup,false);
    

    },false);

    注意点:
    1.必须在拖动出发的时候禁用屏幕滚动和缩放,比如 上面的event.preventDefault();
    2.必须在拖动完成之后remove 之前注册的事件。

    请叫我最亚伦。。哈哈

    回覆
    0
  • 迷茫

    迷茫2017-04-10 15:22:41

    hammerjs这个库中提供了拖动元素的事件,可以试试。

    回覆
    0
  • 取消回覆