javascript - 手机端怎么实现拖动元素效果?
ringa_lee
ringa_lee 2017-04-10 15:20:41
[JavaScript讨论组]

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

ringa_lee
ringa_lee

ringa_lee

全部回复(4)
巴扎黑

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

ringa_lee

这个元素给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这个库中提供了拖动元素的事件,可以试试。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号