Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
461 views
in Technique[技术] by (71.8m points)

移动端 javascript 实现长按拖动

最近我要在移动端实现一个长按拖动功能,发现一个库 https://github.com/bevacqua/d... 非常好用,用起来也非常简单:

下面是一个可以运行的例子:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Document</title>
    <style media="screen">
        .box1 {
            height: 200px;
            background-color: green;
        }

        .box2 {
            height: 200px;
            background-color: red;
        }
    </style>
    <link rel="stylesheet" href="https://cdn.staticfile.org/dragula/3.7.2/dragula.min.css">
</head>
<body>
    <div id="containers">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <script src="https://cdn.staticfile.org/dragula/3.7.2/dragula.min.js" charset="utf-8"></script>
    <script type="text/javascript">
        var drake = dragula([document.querySelector('#containers')])
    </script>
</body>
</html>

在 pc 上可以用鼠标按住然后拖动交换 box1 和 box2 的位置,在移动端可以轻按然后拖动交换位置。。这个离满足的需求已经非常非常接近了。但是问题来了:
我不想轻按拖动,而是长按拖动 因为这明显在移动端是更加合适的交互,也是产品需求...

然后我就看了一下dragula的源码 发现这一行: https://github.com/bevacqua/d...

var touch = {
    mouseup: 'touchend',
    mousedown: 'touchstart',
    mousemove: 'touchmove'
  };

https://github.com/bevacqua/d... 大概就是在这里把鼠标事件替换为触摸事件的。

然后我想把它改成长按,把 touchustart 改成类似于 hammer.js 里面那种 panstart, 或者像这种自定义一下:https://segmentfault.com/a/11... 但是...dragula 这个源码感觉写得有点乱 改了好久不知道怎么和它结合起来...


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

最后用了这个 https://github.com/RubaXa/Sor... 很完美,5分钟搞定。


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...