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

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

<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. Macbook系统环境安装wget的2个方法 - 传统包及Homebrew安装

    文章目录 这里有2个方法可以安装wget命令工具: 考虑到自身项目的拓展需要,朋友建议学习Python爬虫这样对于做大数据采集有较大的帮助,老蒋虽然每天也都接触一些脚本和程序的修改,但是并没有专业和系 ...

  2. CNN tricks

    Must Know Tips/Tricks in Deep Neural Networks (by Xiu-Shen Wei) http://lamda.nju.edu.cn/weixs/projec ...

  3. BZOJ3786星系探索——非旋转treap(平衡树动态维护dfs序)

    题目描述 物理学家小C的研究正遇到某个瓶颈. 他正在研究的是一个星系,这个星系中有n个星球,其中有一个主星球(方便起见我们默认其为1号星球),其余的所有星球均有且仅有一个依赖星球.主星球没有依赖星球. ...

  4. BZOJ3712[PA2014]Fiolki——并查集重构树

    题目描述 化学家吉丽想要配置一种神奇的药水来拯救世界.吉丽有n种不同的液体物质,和n个药瓶(均从1到n编号).初始时,第i个瓶内装着g[i]克的第i种物质.吉丽需要执行一定的步骤来配置药水,第i个步骤 ...

  5. BZOJ2069 POI2004ZAW（最短路）

    显然这样的路径一定是选择了与1相邻的不同的两点分别作为起点和终点(除1本身).如果能将每一组起点终点都计算到就可以得出最优解了.暴力显然不行.注意到我们每次求出的是单源最短路径,考虑如何充分利用信息. ...

  6. Redis无法保存ef复杂对象

    最近项目需要使用redis. 然后我就满怀激情开始处理数据层了.在原来查询数据的基础上,有封装了一个redis缓存层. 结果在redis保存ef对象的时候,发现了一个非常尴尬的问题. model: p ...

  7. BZOJ 3622 : 已经没有什么好害怕的了(dp + 广义容斥原理)

    今天没听懂 h10 的讲课 但已经没有什么好害怕的了 题意 给你两个序列 \(a,b\) 每个序列共 \(n\) 个数 , 数之间两两不同 问 \(a\) 与 \(b\) 之间有多少配对方案 使得 \ ...

  8. 学习Spring Boot：（二十四）多数据源配置与使用

    前言 随着业务量增大,可能有些业务不是放在同一个数据库中,所以系统有需求使用多个数据库完成业务需求,我们需要配置多个数据源,从而进行操作不同数据库中数据. 正文 JdbcTemplate 多数据源 配 ...

  9. [luogu3834]静态区间第k小【主席树】

    传送门:https://www.luogu.org/problemnew/show/P3834 题目描述 如题,给定N个整数构成的序列,将对于指定的闭区间查询其区间内的第K小值. 分析 很多人都说是用 ...

  10. 洛谷P3295 萌萌哒 并查集 + ST表

    又切一道紫题!!! 成功的(看了一吨题解之后),我A掉了第二道紫题. 好,我们仔细观察,发现这是一个排列组合问题. 有些限定条件,要相等的地方,我们就用并查集并起来.最后一查有多少个并查集,就有多少个 ...