dragula插件web端和移动端的拖拽排序

Dragula简介

Dragula是一款支持移动触摸屏设备的纯js元素拖放插件。这个元素拖放插件使用简单，浏览器兼容性好，能够实现通过鼠标或在移动设备中通过手指来拖动DOM元素的位置。

代码演示：

<script src="dist/dragula.js"></script>
<link rel="stylesheet" href="dist/dragula.css">
<script>
   $(document).ready(function () {
       dragula([shuffle]);//上面两个插件务必引入
   });
</script>
<style>
    #shuffle {
        margin: 30px;
        padding: 0;
    }

    .shuffle-item {
        text-align: left;
        margin: 5px;
        padding: 5px;
        border: solid 1px rgba(11,128,238,0.05);
        border-radius: 5px;
        background-color: rgba(11,128,238,0.05);
        color: black;
    }
</style>

<div id="shuffle">
	<div class='shuffle-item'>test 1</div>
	<div class='shuffle-item'>test 2</div>
	<div class='shuffle-item'>test 3</div>
	<div class='shuffle-item'>test 4</div>
</div>

dragula.js 和 dragula.css下载地址：

dragula.js下载
dragula.css下载

dragula的特点有：

• 设置非常简单
• 没有外部依赖
• 可以自动对数据进行排序
• 被移动项带有半透明的视觉效果
• 支持移动触摸设备
• 兼容性好，支持IE7+的所有现代浏览器

安装

• 可以通过bower或npm来安装该元素拖放插件。
  npm install dragula –save
  bower install dragula.js –save

使用方法

该元素拖动插件提供了一个最简单的API来让你可以在页面中拖放元素。

dragula ( containers, options ? )

默认情况下，dragula允许用户在containers中拖动一个元素，并将元素放置到containers列表的其它容器中。如果元素被放置在containers列表元素之外，插件将取消revertOnSpill和removeOnSpill选项。
注意：拖拽事件只会发生在用户鼠标左键点击的时候，并且没有meta键被按下。如果点击的是按钮或超链接元素，拖拽事件也会被忽略。
下面的例子允许用户将元素从left容器拖放到right容器，或从right容器拖放到left容器中。
dragula([left, right]);

配置参数

你也可以为它提供一些参数选项：

dragula(containers, {
    moves: function (el, container) {
        return true;        //默认情况下，元素总是可拖动的
    },
    accepts: function (el, target, source, sibling) {
        return true;        //默认情况下，可以在任何容器中删除元素  
    },
    direction: 'vertical',  //当决定元素放置的位置时，考虑Y轴  
    copy: false,            //默认情况下，元素是移动的，而不是复制的
    revertOnSpill: false,   //如果这是真的，溢出将把元素放回它被拖出的地方  
    removeOnSpill: false    //溢出将,Remove 元素，如果为真  
});

参数说明：

1. options.moves：你可以定义一个moves方法，该方法在发生点击的时候通过(el, container)参数进行调用。如果该方法返回的是false，拖拽事件将不会开始，事件也不会被阻止。
2. options.accepts：该方法确保一个来自source的元素el能够在sibling元素之前放入到target容器之中。sibling元素可以为null，这会使元素被放置到容器的最后一个位置。注意：如果options.copy设置为true，el元素会被设置为一个副本，替代原始的拖放元素。
3. options.copy：如果copy设置为true，元素将被复制而不是拖动。

注意下面的区别：

1. drag 元素从source中隐藏 Nothing happens
2. drop 元素将移动到target中 元素会被克隆到target中
3. remove 元素会从DOM中移除 Nothing happens
4. cancel 元素会停留在source中 Nothing happens
5. options.revertOnSpill：默认情况下，元素被拖放到容器之外会被放置到由 feedback shadow设定的投放点上。设置revertOnSpill为true将确保元素在拖放到容器之外时会被重新放置会拖放的开始位置。
6. options.removeOnSpill：设置removeOnSpill为true会使任何拖放到容器之外的元素被从DOM中移除。注意：如果copy设置为true，remove事件将不会触发。
7. options.direction：当元素被拖放到一个容器中，它将被放置到最接近鼠标位置的点上。如果direction设置为vertical，将会使用Y轴坐标作为参考带你，如果设置为horizontal会使用X轴坐标作为参考点。
事件
8. drake.end( )：使用最后位置的预览阴影标记最为拖放的目的地拖放元素。相应的cancel或drop事件将被触发。
9. drake.cancel(revert)：如果被drake管理的元素是当前被拖放的元素，这个方法会取消拖放事件。你也可以在该方法的调用级别中传入revert参数，效果与revertOnSpill设置为true相同。

注意：一个”cancellation”将在下面的场景中会返回一个”cancel”事件：revertOnSpill设置为true放置的目标（半透明的预览图）在source容器中，并且元素被放置到相同的容器中。

10. drake.remove( )：如果被drake管理的元素是当前被拖放的元素，该方法会将元素从DOM中移除。
11. drake.on (Events)：drake是一个事件发送器。下面的事件可以使用drake.on(type, listener)来跟踪。

事件名称      参数      描述
drag el, container   el 从container中被拖拽
drop el, container, source  el被放置到container中，它来自source
cancel el, container  el被拖动但仍在原处，并最终回到container
remove el, container  el被拖动但仍在原处，并最终被从DOM中移除。
shadow el, container  el是拖放目的地的半透明预览，它会移动到container中。
drake.destroy ( )： 移除所有的拖放事件。如果.destroy在一个元素被拖动时触发，拖动将不会有效果。