欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

案例——拖拽

程序员文章站 2022-06-23 22:54:07
拖拽 ~~~javascript ~~~ ......

拖拽

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box1{
                width: 100px;
                height: 100px;
                background-color: skyblue;
                position: absolute;
            }
            #box2{
                width: 100px;
                height: 100px;
                background-color: yellow;
                position: absolute;
                left: 200px;
                top: 200px;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                /*
                拖拽box1元素
                 - 拖拽的流程
                     1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
                     2.当鼠标移动时被拖拽元素跟随鼠标移动  onmousemove
                     3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
                */
               
               // 获取box1？
               var box1=document.getelementbyid("box1");
               // 为box1绑定一个鼠标按下事件
               box1.onmousedown=function(event){
                   // div的偏移量  鼠标.clientx - 元素.offsetleft
                   // div的偏移量  鼠标.clenty -元素.offsettop
                   event = event || window.event;
                   var ol=event.clientx - box1.offsetleft;
                   var ot=event.clienty-box1.offsettop;
                   
                   // 为document绑定一个onmousemove事件
                   document.onmousemove=function(event){
                       event = event || window.event;
                       // 当鼠标移动时被拖拽元素跟随鼠标移动  onmousemove
                       // 获取鼠标坐标？
                       var left =event.clientx - ol;
                       var top=event.clienty - ot;
                       
                       // 修改box1的位置
                       
                       box1.style.left=left+"px";
                       box1.style.top=top+"px";
                   }
                    // 当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
                   document.onmouseup=function(){
                                   // 取消document.onmousemove事件
                                   document.onmousemove=null;
                                   
                                   document.onmouseup=null;
                                   alert(12);
                   }
               };
              /*
              当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容
              此事后导致拖拽功能的异常
              如果不希望发生这个异常   return false
              
              对ie8不起作用
              */
              return false;
            }
        </script>
    </head>
    <body>
        <div id="box1"></div>
        <div id="box2"></div>
    </body>
</html>

上一篇： 2020实测信号最好的手机品牌（这款手机无论是外观还是网速都没的话说）

下一篇： 寒假集训第一天---并查集题解

推荐阅读