zoukankan      html  css  js  c++  java
  • 带边框的拖拽

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    #box {
         100px;
        height:100px;
        background: red;
        position: absolute;
        left: 0;
        top: 0;
    }

    .new{
         100px;
        height: 100px;
        position: absolute;
        border: green 1px dashed;
    }
    </style>
    <script>
    window.onload = function(){
        var oBox = document.getElementById('box');
        oBox.onmousedown = function(ev){
            var oEvent = ev || event;
            var disX = oEvent.clientX - oBox.offsetLeft;
            var disY = oEvent.clientY - oBox.offsetTop;
            var oNew = document.createElement('div');
            oNew.style.left = oBox.offsetLeft + 'px';
            oNew.style.top = oBox.offsetTop + 'px';
            oNew.className = 'new';
            oBox.parentNode.appendChild(oNew);
            
            document.onmousemove= function(ev){
                var oEvent = ev || event;    
                var l = oEvent.clientX - disX;
                var t = oEvent.clientY - disY;
                oNew.style.left = l + 'px';
                oNew.style.top = t + 'px';
            }    
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
                oBox.style.left = oNew.offsetLeft + 'px';
                oBox.style.top = oNew.offsetTop + 'px';
                oBox.parentNode.removeChild(oNew);
                oBox.releaseCapture && oBox.releaseCapture();     
            }
            oBox.setCapture && oBox.setCapture();
            return false;
        }
    }
    </script>
    </head>

    <body>
    <div id="box"></div>
    </body>
    </html>

  • 相关阅读:
    判断平面的一堆点是否在两条直线上
    约数的个数 + 贪心
    划分树板子
    如何获取前端提交来得json格式数据
    post 和php://input 转
    使用Guzzle执行HTTP请求
    redis集群搭建 不用ruby
    systemctl命令
    canal 配置 多个监听 推送到不同mq
    canal 整合RabbitMQ
  • 原文地址:https://www.cnblogs.com/guolimin/p/6091302.html
Copyright © 2011-2022 走看看