zoukankan      html  css  js  c++  java
  • JS实现鼠标拖动div移动



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <title></title>
    <script type="text/javascript">
    var mouseX, mouseY;
    var objX, objY;
    var isDowm = false; //是否按下鼠标
    function mouseDown(obj, e) {
    obj.style.cursor = "move";
    objX = div1.style.left;
    objY = div1.style.top;
    mouseX = e.clientX;
    mouseY = e.clientY;
    isDowm = true;
    }
    function mouseMove(e) {
    var div = document.getElementById("div1");
    var x = e.clientX;
    var y = e.clientY;
    if (isDowm) {
    div.style.left = parseInt(objX) + parseInt(x) - parseInt(mouseX) + "px";
    div.style.top = parseInt(objY) + parseInt(y) - parseInt(mouseY) + "px";
    document.getElementById("span1").innerHTML = "x:" + div.style.top + " " + "y:" + div.style.left;
    }
    }
    function mouseUp(e) {
    if (isDowm) {
    var x = e.clientX;
    var y = e.clientY;
    var div = document.getElementById("div1");
    div.style.left = (parseInt(x) - parseInt(mouseX) + parseInt(objX)) + "px";
    div.style.top = (parseInt(y) - parseInt(mouseY) + parseInt(objY)) + "px";
    document.getElementById("span2").innerHTML = "x:" + div.style.top + " " + "y:" + div.style.left;
    mouseX = x;
    rewmouseY = y;
    div1.style.cursor = "default";
    isDowm = false;
    }
    }
    </script>
    </head>
    <body>
    <span id="span1"></span></br><span id="span2"></span></br>
    <div id="div1" style="background-color: Green; border: 1px solid red; height: 300px;
    top: 100px; left: 100px; 300px; position: absolute;" onmousedown="mouseDown(this,event)"
    onmousemove="mouseMove(event)" onmouseup="mouseUp(event)">
    </div>
    </body>
    </html>

  • 相关阅读:
    11.分类与监督学习,朴素贝叶斯分类算法
    14 深度学习-卷积
    13-垃圾邮件分类2
    12.朴素贝叶斯-垃圾邮件分类
    9、主成分分析
    8、特征选择
    7.逻辑回归实践
    6.逻辑归回
    5.线性回归算法
    15 手写数字识别-小数据集
  • 原文地址:https://www.cnblogs.com/jalenFish/p/14099067.html
Copyright © 2011-2022 走看看