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下载的主要内容，如果未能解决你的问题，请参考以下文章