zoukankan      html  css  js  c++  java
  • dragula 一个 JavaScript 库,实现了网页上的拖放位置

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

     

    使用方法比较简单,如下代码:

    <link href='dist/dragula.css' rel='stylesheet' type='text/css' />
    <script src='dist/dragula.js'></script>
    
    <div id="left1" style="height:320px; 1200px; background:#fff;">
        <div style="height:120px; 120px; background:#ddd;"></div>
        <div style="height:120px; 120px; background:#eee;"></div>
    </div>
    
    <div id="right1" style="height:320px; 1200px; background:#f60;">
        <div style="height:120px; 120px; background:#ddd;"></div>
        <div style="height:120px; 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

     

  • 相关阅读:
    python入门(变量命名规则)
    基础数据类型(不可变数据类型)
    记录Linux下安装elasticSearch时遇到的一些错误
    利用谷歌 kaptcha 进行验证码生成
    分布式拒绝服务攻击
    python3.5文档
    python反射机制
    tornado 使用tornado让你的请求异步非阻塞
    tornado的入门教程
    spark 环境变量系列配置
  • 原文地址:https://www.cnblogs.com/xiangsj/p/6511162.html
Copyright © 2011-2022 走看看