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

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

阅读 15k
5 个回答

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

新手上路,请多包涵

我建议自己写,移动端主要是 通过 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 之前注册的事件。

请叫我最亚伦。。哈哈

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

function dropImg(obj){

    $(obj).on('touchstart',function(event){
        var disx=event.originalEvent.changedTouches[0].clientX-$(obj).offset().left;
        var disy=event.originalEvent.changedTouches[0].clientY-$(obj).offset().top;
        var moveFlag=true;
        $(document).on('touchmove',function(event){
            event.preventDefault();
            if(moveFlag){
                $(obj).css({
                    "left":event.originalEvent.changedTouches[0].clientX - disx,
                    "top":event.originalEvent.changedTouches[0].clientY - disy
                });
            }
        });
        $(document).on('touchend',function(){
            moveFlag=false;
        })
    });
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题