zxx-drag
/
demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zxxDrag 拖拽演示页面</title>
    <style>
        .box{position:absolute; left:10px; top:50px; padding:5px; background:#f0f3f9; font-size:14px; box-shadow:2px 2px 4px #666666;}
        .main{border:1px solid #a0b3d6; background:white;}
        .bar{line-height:2; background:#beceeb; border-bottom:1px solid #a0b3d6; padding: 0 10px; cursor:move;}
        .content{width:420px; height:250px; padding:10px; max-width: calc(100vw - 60px); background-color: #fff;}

        .heading{margin-top:90vh;}
        .container{outline:1px solid; max-width: 414px; height: 300px; background-color: #f5f5f5; position: relative;}
        .target{width: 100px; height: 100px; background-color: #a0b3d6; opacity: .9; position: absolute;}
        .target:active{opacity: 1;}
    </style>
</head>
<body>
    <div id="box" class="box">
        <div class="main">
            <div id="bar" class="bar">拖拽</div>
            <div class="content">
                内容……
            </div>
        </div>
    </div>

    <h3 class="heading">内部拖拽</h3>
    <div id="container" class="container">
        <div id="target" class="target"></div>
    </div>


    <script src="./zxxDrag.js"></script>
    <script>
        zxxDrag(bar, {
            target: box
        });

        zxxDrag(target, {
            bounding: container
        });
    </script>
</body>
</html>