zoukankan      html  css  js  c++  java
  • Js 实现鼠标拖动浮动层

    <!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>
    

      

  • 相关阅读:
    qemu+chroot构建arm aarch64虚拟机
    <转>Linux环境下段错误的产生原因及调试方法小结
    <转>PCA的数学原理
    博客分类整理
    detectron2 配置记录
    如何读取部分的预训练模型
    重新配置语义分割实验环境遇到的坑
    pytorch 调整tensor的维度位置
    seg代码配置的踩坑记录
    Alienware R8外星人台式机安装双系统(WIN10+Ubuntu)的总结
  • 原文地址:https://www.cnblogs.com/voidobject/p/2860337.html
Copyright © 2011-2022 走看看