zoukankan      html  css  js  c++  java
  • HTML DOM-->拖拽效果

    实现:按下鼠标拖动,盒子跟着一起移动

    代码如下:

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>js_excise</title>
            <style type="text/css">
                body{
                    position: relative;
                }
                div{
                    width: 100px;
                    height: 100px;
                    position: absolute;
                    background: palegreen;
                }
            </style>
        </head>
    
        <body>
            <div id="box"></div>
            
            <script type="text/javascript">
                //获取元素节点
                var jsBOX = document.getElementById('box')
                
                //定义坐标
                var baseX = 0;
                var baseY = 0;
                var moveX = 0;
                var moveY = 0;
                
                //鼠标按下事件
                jsBOX.addEventListener('mousedown',function(e){
                    var e1 = e || window.event
                    
                    //获取鼠标按下位置
                    baseX = e1.pageX
                    baseY = e1.pageY
                    console.log(baseX,baseY)
                    
                    //鼠标移动事件
                    document.onmousemove= function(e){
                        var e2 = e || window.event
                        
                        //鼠标移动后的位置
                        moveX = e2.pageX - baseX
                        moveY = e2.pageY - baseY
                        baseX = e2.pageX
                        baseY = e2.pageY
                        console.log(baseX,baseY)
                        
                        //移动后盒子位置
                        jsBOX.style.left = jsBOX.offsetLeft + moveX + 'px'
                        jsBOX.style.top = jsBOX.offsetTop + moveY + 'px'    
                    }    
                },false)
                
                //鼠标抬起事件-->清掉移动事件
                document.addEventListener('mouseup',function(){
                    document.onmousemove = null
                },false)
            </script>
        </body>
    </html>

    输出:

  • 相关阅读:
    Callable的Future模式
    并发队列
    并发工具类和线程池
    安全与死锁问题
    ConcurrentHashMap底层实现
    Map集合常见面试题
    List集合框架
    类加载器
    Activiti中个人任务分配
    流程定义
  • 原文地址:https://www.cnblogs.com/abner-pan/p/12833404.html
Copyright © 2011-2022 走看看