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>

  • 相关阅读:
    struts2第一天——入门和基本操作
    eclipse各种小图标含义
    复制web项目时注意修改web项目名
    AndroidCityPicker仿IOS选择效果
    每日五题(Spring)
    block-循环引用
    给EasyUi的Form加入自己主动填充部分输入框的方法
    智能停车O2O 独角兽初现:“ETCP停车”获5000万美金A轮融资
    解决移动端页面滚动后不触发touchend事件
    《从零開始学Swift》学习笔记(Day 61)——Core Foundation框架之内存管理
  • 原文地址:https://www.cnblogs.com/niuniudashijie/p/6129787.html
Copyright © 2011-2022 走看看