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

Posted 51baidu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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下载的主要内容,如果未能解决你的问题,请参考以下文章

30 个最棒的 jQuery 的拖放插件

30 个最棒的 jQuery 的拖放插件

基于jquery实现图片拖动和曲线拖放

Draggabilly 不向新添加的元素添加事件

jquery实现添加到购物车拖放功能 像百度旅游定制旅游一样 如下图

使用网格拖放[关闭]