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

    <!DOCTYPE html>

    <html>

     

    <head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

    #box {

    height: 300px;

    width: 300px;

    background-color: green;

    position: absolute;

    left: 0;

    top: 0;

    }

     

    .border {

    border: 2px dashed red;

    position: absolute;

    }

    </style>

    </head>

     

    <body>

    <div id="box">

     

    </div>

    </body>

    <script type="text/javascript">

    var box = document.getElementById("box");

    var x = 0;

    var y = 0;

    box.onmousedown = function(ev) {

    var oEvent = ev || event;

    x = oEvent.clientX - box.offsetLeft;

    y = oEvent.clientY - box.offsetTop;

    //产生一个新的div,即为拖拽的框

    var div = document.createElement("div");

    div.className = "border";

    div.style.width = box.offsetWidth + "px";

    div.style.height = box.offsetHeight + "px";

    div.style.left = box.offsetLeft + "px";

    div.style.top = box.offsetTop + "px";

    document.body.appendChild(div)

    //鼠标移动的函数

    document.onmousemove = function(ev) {

    var oEvent = ev || event;

     

    var L = oEvent.clientX - x;

    var T = oEvent.clientY - y;

     

    div.style.left = L + "px";

    div.style.top = T + "px";

    }

    //鼠标抬起的函数

    document.onmouseup = function() {

    this.onmousemove = null;

    this.onmouseup = null;

    box.style.left = div.offsetLeft + "px";

    box.style.top = div.offsetTop + "px";

    document.body.removeChild(div);

    }

     

    return false;

     

    }

    </script>

     

    </html>

  • 相关阅读:
    AlterDialog 经常使用的样式
    C++编程-&gt;pair(对组)
    arcgis server10.2.2公布地图基础服务的详细步骤
    solr实战-(一)
    iOS开发-自己定义重用机制给ScrollerView加入子视图
    Day2下午解题报告
    Day2二分图笔记
    考前冲刺班成绩
    Day2平衡树笔记
    Day2上午解题报告
  • 原文地址:https://www.cnblogs.com/niuniudashijie/p/6129787.html
Copyright © 2011-2022 走看看