zoukankan      html  css  js  c++  java
  • JavaScript简单拖拽事件(鼠标跟随事件)

    本例演示简单来说分为两步:

    第一步:鼠标按下时的事件对象操作。

    第二步:鼠标移动时对事件对象的操作。

     <style>
                *{margin: 0;
                    padding: 0;
                }
                #box{ 100px;height: 100px;background: #CCC;border: 1px solid #999;position: absolute;
                        top: 100px;left: 500px;text-align: center;line-height: 100px;cursor: move;
                }
            
    </style>
    <div id="box">想要去哪?</div>
    <script type="text/javascript">
                var oBox =document.getElementById("box");
                oBox.onmousedown = function(ev){
                    ev =ev ||event;
                    var oLeft = oBox.offsetLeft;
                    var oTop = oBox.offsetTop;
                    var a =ev.clientX-oLeft;
                    var b =ev.clientY-oTop;
                    oBox.onmousemove =function (ev){
                        ev = ev || event;
                        oBox.style.left =ev.clientX-a+'px';
                        oBox.style.top =ev.clientY-b+'px';
                    }
                }    
                
                document.onmouseup =function(){
                    oBox.onmousemove =function(){
                        null;
                    }
                }
            
    </script>

  • 相关阅读:
    css3中calc()使用
    垂直居中
    QLineEdit IP地址校验
    UML类图几种关系的总结(网摘)
    如何解压 Mac OS X 下的 PKG 文件(网摘)
    %appdata%目录下配置文件修改
    文件字符串替换
    Qt版权符号显示问题
    Mac OS X 终端命令开启功能
    Qt 无边框拖拽实现
  • 原文地址:https://www.cnblogs.com/yanglei9308/p/6081185.html
Copyright © 2011-2022 走看看