如图，把上面红蓝色拖放到下面

使用方法比较简单，如下代码：

<link href='dist/dragula.css' rel='stylesheet' type='text/css' />

<script src='dist/dragula.js'></script>

<div id="left1" style="height:320px; width:1200px; background:#fff;">

    <div style="height:120px; width:120px; background:#ddd;"></div>

    <div style="height:120px; width:120px; background:#eee;"></div>

</div>

<div id="right1" style="height:320px; width:1200px; background:#f60;">

    <div style="height:120px; width:120px; background:#ddd;"></div>

    <div style="height:120px; width:120px; background:#eee;"></div>

</div>

<script>

dragula([document.getElementById('left1'), document.getElementById('right1')]);

</script>

下面排序demo支持手机端，但不支持长按再移动，只能轻按移动：

<!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>

        .box1{

            height:100px;

            background-color:#ddd;

        }

        .box2{

            height:100px;

            background-color:#f60;

        }

        .box3{

            height:100px;

            background-color:#666;

        }

    </style>

    <link rel="stylesheet" href="dragula-master/dist/dragula.min.css">

</head>

<body>

<div id="containers">

    <div class="box1"></div>

    <div class="box2"></div>

    <div class="box3"></div>

</div>

<script src="dragula-master/dist/dragula.min.js" charset="utf-8"></script>

<script type="text/javascript">

    var drake = dragula([document.querySelector('#containers')])

</script>

</body>

</html>

源码下载：

https://github.com/bevacqua/dragula?hmsr=toutiao.io&utm_medium=toutiao.io&utm_source=toutiao.io

dragula 一个 JavaScript 库，实现了网页上的拖放位置的更多相关文章

  1. 优雅的创建一个JavaScript库

    这篇文章的目的是通过演示一个简单的例子来介绍在JS中实例化和定义一个库的正确方法,以优化他人编写或维护自己的JS库. 在我们深入之前,我做了两点假设: 你知道简单的JavaScript或C语言. 你不 ...

  2. 创建你的第一个JavaScript库

    是否曾对Mootools的魔力感到惊奇?是否有想知道Dojo如何做到那样的?是否对jQuery感到好奇?在这个教程中,我们将了解它们背后的东西并且动手创建一个超级简单的你最喜欢的库. 我们其乎每天都在 ...

  3. 基于Grunt构建一个JavaScript库

    现在公认的JavaScript典型项目需要运行单元测试,合并压缩.有些还会使用代码生成器,代码样式检查或其他构建工具. Grunt.js是一个开源工具,可以帮助你完成上面的所有步骤.它非常容易扩展,并 ...

  4. 十二步创建你的第一个JavaScript库

    是否曾对Mootools的魔力感到惊奇?是否有想知道Dojo如何做到那样的?是否对jQuery感到好奇?在这个教程中,我们将了解它们背后的东西并且动手创建一个超级简单的你最喜欢的库. 我们其乎每天都在 ...

  5. 定义一个javascript库的兼容标准

    1. 定义一个库的兼容标准, 比如说是ie6+? 还是ie8+? 还是ie9.2. 原生知识储备,至少你不完整的读过一个库的代码.3. DOM操作和事件上的问题更多的是hack技巧,并不是算法,也不是 ...

  6. javascript: Element.getBoundingClientRect() 获取元素在网页上的坐标位置

    来自:https://blog.csdn.net/weixin_42895400/article/details/81811095?utm_source=blogxgwz1 Element.getBo ...

  7. 最新的jQuery插件和JavaScript库

    每一个前端开发人员很清楚的重要性和功能的JavaScript库提供.它提供了一个简单的接口,用于构建快速动态的接口,而无需大量的代码. 谢谢你的超级从事jQuery开发者社区,人始终是创造新的和令人惊 ...

  8. 15款增强web体验的Javascript库

    1. Pikaday: Standalone JavaScript Datepicker 这是一个令人耳目一新的JavaScript日期选择器 轻量轻(压缩和gzip后小于5KB) 没有依赖其它JS框 ...

  9. 20个简化开发任务的 JavaScript库

    所谓JavaScript库就是预先写好的可以简化基于JavaScript的应用程序开发的,尤其是Ajax和其它以web为中心的技术的 JavaScript代码集.JavaScript主要用于写内嵌于H ...

随机推荐

  1. [CNBETA]Intel CPU底层漏洞事件完全详解：全球手机/电脑无一幸免[转帖]

    http://www.cnbeta.com/articles/tech/685897.htm 由Intel CPU漏洞问题衍生出来的安全事件已经波及全球几乎所有的手机.电脑.云计算产品,ARM确认 C ...

  2. html5應用緩存

    HTML5使用了應用緩存,就是web應用緩存,使得在離線狀態下可以訪問web'應用. 應用緩存的優點: 離線訪問-可以在無網的狀態下訪問應用 速度-有緩存的應用加載更快 瀏覽器負載-瀏覽器只從服務器加 ...

  3. BZOJ2795&2890&3647[Poi2012]A Horrible Poem——hash

    题目描述 给出一个由小写英文字母组成的字符串S,再给出q个询问,要求回答S某个子串的最短循环节.如果字符串B是字符串A的循环节,那么A可以由B重复若干次得到. 输入 第一行一个正整数n (n<= ...

  4. BZOJ4530 BJOI2014大融合（线段树合并+并查集+dfs序）

    易知所求的是两棵子树大小的乘积.先建出最后所得到的树,求出dfs序和子树大小.之后考虑如何在动态加边过程中维护子树大小.这个可以用树剖比较简单的实现,但还有一种更快更优美的做法就是线段树合并.对每个点 ...

  5. day26 多继承

    class A(object): def test(self): print('from A') class B(A): def test(self): print('from B') class C ...

  6. Word Ladder - LeetCode

    目录 题目链接 注意点 解法 小结 题目链接 Word Ladder - LeetCode 注意点 每一个变化的字母都要在wordList中 解法 解法一:bfs.类似走迷宫,有26个方向(即26个字 ...

  7. SQL Server 增、删、改、小部分查

    --现有三个表Student.Score.Course.Teacher create table Student ( Sno ) not null,--学号 Sname ) not null,--姓名 ...

  8. 再谈一次关于Java中的 AIO(异步IO) 与 NIO(非阻塞IO)

    今天用ab进行压力测试时,无意发现的: Requests per second:    xxx [#/sec] (mean) ab -n 5000 -c 1000 http://www:8080/up ...

  9. Asp:函数是用传值还是传址

    传址会把变量的内存地址传递到sub里,在sub里对变量所做的修改就是对原来的变量进行修改,而传值只是把变量的值传递到sub里,此时在sub里修改变量的值不会影响原来的变量. 在vb中调用函数默认是传址 ...

  10. JSP总结(二)—Cookie(汇总)

    注:后缀为汇总的基本上是整理一些网上的. 1.   什么是Cookie     Cookie是Web服务器保存在用户硬盘上的一段文本.Cookie允许一个Web站点在用户电脑上保存信息并且随后再取回它 ...