zoukankan      html  css  js  c++  java
  • Js 拖动效果

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf8">
        <title>js拖拽效果</title>
        <style type="text/css">
        #div1 {
            width : 200px;
            height: 200px;
            position: absolute;
            background: #99dd33;
            cursor: move;
        }
        </style>
    </head>
    <body>
        <div id="div1"></div>
    </body>
    <script type="text/javascript">
        window.onload = function() {
            var disX = disY = 0;                         // 鼠标距离div的左距离和上距离
            var div1 = document.getElementById("div1");  // 得到div1对象
        
            // 鼠标按下div1时
            div1.onmousedown = function(e) {
                var evnt = e || event;                   // 得到鼠标事件
                disX = evnt.clientX - div1.offsetLeft;   // 鼠标横坐标 - div1的left
                disY = evnt.clientY - div1.offsetTop;    // 鼠标纵坐标 - div1的top
            
                // 鼠标移动时
                document.onmousemove = function(e) {
                    var evnt = e || event;
                    var x = evnt.clientX - disX;
                    var y = evnt.clientY - disY;
                    var window_width  = document.documentElement.clientWidth  - div1.offsetWidth;
                    var window_height = document.documentElement.clientHeight - div1.offsetHeight;
                
                    x = ( x < 0 ) ? 0 : x;                          // 当div1到窗口最左边时
                    x = ( x > window_width ) ? window_width : x;    // 当div1到窗口最右边时
                    y = ( y < 0 ) ? 0 : y;                          // 当div1到窗口最上边时
                    y = ( y > window_height ) ? window_height : y;  // 当div1到窗口最下边时
                
                    div1.style.left = x + "px";
                    div1.style.top  = y + "px";
                };
            
                // 鼠标抬起时
                document.onmouseup = function() {
                    document.onmousemove =null;
                    document.onmouup = null;
                };
            
                return false;
            };
        };
    </script>
    </html>
  • 相关阅读:
    python的struct模块
    Linux程序设计学习笔记(独乐乐版)
    理解AndroidX
    Android中的样式和主题
    Android中Fragment的使用
    Android 中Dialog的使用
    直接在apk中添加资源的研究
    Android签名生成和互转
    简单扒一下Volley源码,扩展Volley生命周期
    获取android所有联系人信息
  • 原文地址:https://www.cnblogs.com/feige/p/6155980.html
Copyright © 2011-2022 走看看