完美拖拽

Posted 2021-02-21 shangec

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了完美拖拽相关的知识，希望对你有一定的参考价值。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6         <style>
 7             #div1{width: 200px;height:200px;background-color:red;position: absolute;}
 8         </style>
 9         <script>
10             window.onload=function(){
11                 var oDiv=document.getElementById(‘div1‘);
12                 var disX=0;
13                 var disY=0;
14 
15                 oDiv.onmousedown=function(ev){
16                     var oEvent=ev||event;
17 
18                     disX=oEvent.clientX-oDiv.offsetLeft;
19                     dixY=oEvent.clientY-oDiv.offsetTop;
20 
21                     if(oDiv.setCapture){
22                         document.onmousemove=mouseMove;
23                         document.onmouseup=mouseUp;
24                         oDiv.setCapture();
25                     }
26                     else{
27                         document.onmousemove=mouseMove;
28                         document.onmouseup=mouseUp;
29                     }
30 
31                     function mouseMove(ev){
32                         var oEvent=ev||event;
33                         var l=oEvent.clientX-disX;
34                         var t=oEvent.clientY-disY;
35 
36                         oDiv.style.left=l+‘px‘;
37                         oDiv.style.top=t+‘px‘;
38                     }
39                     function mouseUp(){
40                         this.onmousemove=null;
41                         this.onmouseup=null;
42 
43                         if(oDiv.releaseCapture){
44                             oDiv.releaseCapture();
45                         }
46                     }
47 
48                     return false;
49                 }
50             }
51         </script>
52     </head>
53     <body>
54         fawegagaerhbartharehaha
55         <p>awetgaegarehaerheraf</p>
56         <p>awetgaegarehaerheraf</p>
57         <div id="div1">
58             fawetawgagaer
59             agaregarehgaer
60         </div>
61         <p>awetgaegarehaerheraf</p>
62     </body>
63 </html>

完美拖拽

以上是关于完美拖拽的主要内容，如果未能解决你的问题，请参考以下文章

完美的el-dialog的拖拽，双击头部全屏，拉宽，拉高等功能的指令

续：纠正：ubuntu7.04可以安装，而且完美的安装！ for《Oracle-10.2.0.1，打补丁10.2.0.5：在 debian 版本4不含4以上，及 ubuntu 7.04不含(代码片段