Draggabilly 轻松实现拖放功能|插件下载|Demo下载

Draggabilly是一款功能强大的网页元素拖动拖拽插件。该元素拖拽插件可以和jQuery结合使用，也可以以纯js的方式使用。它提供了强大的拖拽元素的能力，并且可以支持IE8浏览器和移动触摸设备。官网：https://draggabilly.desandro.com

网上有很多关于Draggabilly的例子，不过大部分都不够详细，我在网上下载了一个例子，在此基础上做了一些描述，包括参数含义，事件绑定，元素事件（dragStart，dragMove，dragEnd，pointerDown，pointerMove，pointerUp，staticClick），方法（DISABLE，ENABLE，destroy）等等。理解起来更加的清晰明了。

Demo下载：Draggabilly 拖放功能 Demo.rar

直接上代码吧：

html：

<body>
    <article class="htmleaf-container">
        <header class="htmleaf-header">
            <h1>拖动插件</h1>
        </header>
        <div class="htmleaf-content">
            <h3>可以任意拖动。</h3>
            <div class="box box-1" id="draggable1">
                <div class="total-centered">Drap me</div>
            </div>
            <h3>只能在X轴上拖动。</h3>
            <div class="box box-2" id="draggable2">
                <div class="total-centered">axis:'x'</div>
            </div>
            <h3>只能在父容器中移动。</h3>
            <div class="container">
                <div class="draggable"></div>
                <div class="draggable"></div>
                <div class="draggable"></div>
            </div>
            <h3>以网格的方式拖动。</h3>
            <div class="box box-3" id="draggable3"><div class="total-centered">grid[x,y]</div></div>
            <h3>指定拖动交互元素(只有内部小方块区域可以进行拖动)。</h3>
            <div class="box box-4" id="draggable4">
                <div class="handle"></div>
            </div>
        </div>
    </article>
</body>

jquery：

        $(function () {
            //初始化
            /*
                属性：
                axis： 属性值为“X”水平方向上移动，“Y”垂直方向上移动，
                containment：元素移动的边界，如果为“true”则为父容器
                grid：网格式移动元素，每x和y像素移动元素
                handle： 指定拖动交互元素(只有内部小方块区域可以进行拖动)。
            */
            //可以任意拖动
            var draggable1 = $('#draggable1').draggabilly();
            //只能在X轴上拖动。
            var draggable2 = $('#draggable2').draggabilly({ axis: 'x' });
            //只能在父容器中移动
            var draggable = $('.draggable').draggabilly({ containment: true });
            //以网格的方式拖动
            var draggable3 = $('#draggable3').draggabilly({ grid: [100, 100] });
            //指定拖动交互元素(只有内部小方块区域可以进行拖动)。
            var draggable4 = $('#draggable4').draggabilly({ handle: '.handle' });
 
            //事件
 
            /*
               dragStart: 拖动开始移动前触发
               dragMove: 当元素移动时触发。
               dragEnd:当元素停止移动时触发。
               pointerDown:当用户指针按下（鼠标、触摸）时触发。
               pointerMove:当用户的指针移动时触发。
               pointerUp:当用户指针离开元素时触发。
               staticClick:用户的指针压下并没有开始拖动。 单击事件很难拖动界面检测，因为他们是当用户的鼠标触发。draggabilly的staticclick事件解决了，因为它被触发时，用户没有拖。
             */
            //event - 类型: 事件 - 原生的mousedown或touchstart事件
            //pointer - 类型: 鼠标事件（MouseEvent）或触控事件（Touch）对象 - 这个事件对象有.pageX和.pageY
            //moveVector - 类型: 对象 - 当前位置离初始位置的位移 { x: 20, y: -30 }
 
            //dragStart：拖动开始移动前触发
            draggable1.on('dragStart', function (event, pointer) {
                console.log("拖动开始移动前触发");
            })
 
            //dragMove：当元素移动时触发。
            draggable1.on('dragMove', function (event, pointer, moveVector) {
                console.log("当元素移动时触发");
            })
 
            //dragEnd：当元素停止移动时触发
            draggable1.on('dragEnd', function (event, pointer) {
                console.log("当元素停止移动时触发");
            })
 
            //pointerDown：当用户指针按下（鼠标、触摸）时触发。
            draggable2.on('pointerDown', function (event, pointer) {
                console.log("当用户指针按下（鼠标、触摸）时触发。");
            })
 
            //pointerMove：当用户的指针移动时触发
            draggable2.on('pointerMove', function (event, pointer, moveVector) {
                console.log("当用户的指针移动时触发。");
            })
 
            //pointerUp：当用户指针离开元素时触发
            draggable2.on('pointerUp', function (event, pointer) {
                console.log("当用户指针离开元素时触发。");
            })
 
            //staticClick：用户的指针压下并没有开始拖动。 单击事件很难拖动界面检测，因为他们是当用户的鼠标触发。draggabilly的staticclick事件解决了，因为它被触发时，用户没有拖。
            draggable2.on('staticClick', function (event, pointer) {
                console.log("用户的指针压下并没有开始拖动。 单击事件很难拖动界面检测，因为他们是当用户的鼠标触发。draggabilly的staticclick事件解决了，因为它被触发时，用户没有拖。");
            })
 
            //事件监听
            draggable1.on("eventName", function () {
                alert("事件监听");
            });
 
            //方法
            //禁用，元素不可拖动
            //draggable1.draggabilly('disable')
 
            //解除禁止，元素恢复拖动
            //draggable1.draggabilly('enable')
 
            //解除拖动绑定（解除后，不可恢复拖动功能，需要重新初始化元素）
            //draggable1.draggabilly('destroy')
 
            //jQuery对象得到draggabilly实例
            var draggie = $('#draggable1').data('draggabilly')
            console.log('draggie at ' + draggie.position.x + ', ' + draggie.position.y)
 
 
        });

Draggabilly 轻松实现拖放功能|插件下载|Demo下载

猜你喜欢