zoukankan      html  css  js  c++  java
  • 自由拖动

    这个是老师给的代码
    就是调用包装好的函数
    挺方便的一个东西哈
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>自由拖动</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    div{
    200px;
    height: 200px;
    text-align: center;
    line-height: 200px;
    font-family: "微软雅黑";
    cursor: move;
    }
    .free:active,.moveOnX:active,.fragment:active,.container2:active,.fragment3:active{
    background: #09F;
    }
    .free,.moveOnX,.fragment,.container2,.fragment3{
    background: #fa0;
    300px;
    height: 300px;
    }
    .container2{
    200px;
    height: 200px;
    }
    .container,.container3{
    500px;
    height: 200px;
    border: 2px solid red;
    }
    .fragment,.fragment3{
    100px;
    height: 100px;
    line-height: 100px;
    }
    </style>
    <script src="JS/jquery.min.js"></script>
    <script src="JS/draggabilly.pkgd.min.js"></script>
    </head>
    <body>
    <div class="free">我可以被自由拖动</div>
    <div class="moveOnX">我只能在X轴上移动</div>
    <div class="container">
    <div class="fragment">容器里面移动</div>
    </div>
    <div class="container2">网格移动</div>
    <div class="container3">
    <div class="fragment3">把手</div>
    </div>
    <script>
    $(".free").draggabilly();
    $(".moveOnX").draggabilly({axis:"x"});
    $(".fragment").draggabilly({containment:true});
    $(".container2").draggabilly({grid:[50,50]});
    $(".container3").draggabilly({handle:".fragment3"});
    </script>
    </body>
    </html>
  • 相关阅读:
    flask多线程多协程操作
    flask介绍
    centos django+Nginx+uwsgi部署
    centos下运行python3.6+Django+mysql项目
    centos虚拟机下安装nginx
    redis安装
    路飞学城课程_课程详细_作业点评
    redis使用方式
    git命令学习
    组合&多态&封装
  • 原文地址:https://www.cnblogs.com/zhubaixue/p/6623913.html
Copyright © 2011-2022 走看看