javascript 拖拽事件 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7     <title>Document</title>
 8     <style media="screen">
 9         * {
10             margin: 0;
11             padding: 0;
12         }
13         .nav {
14             height: 30px;
15             background-color: lemonchiffon;
16             line-height: 30px;
17             padding-left: 30px;
18         }
19         .nav a {
20             text-align: center;
21             font-size: 14px;
22             text-decoration: none;
23             color: #000;
24         }
25         .d-box {
26             width: 400px;
27             height: 300px;
28             border: 5px solid #ccc;
29             box-shadow: 2px #666;
30             position: absolute;
31             top: 40%;
32             left: 40%;
33         }
34         .hd {
35             width: 100%;
36             height: 25px;
37             background-color: #777;
38             line-height: 25px;
39             color: #fff;
40             cursor: move;
41         }
42         #box_close {
43             float: right;
44             cursor: pointer;
45         }
46     </style>
47 </head>
48 <body>
49     <!-- 顶部注册信息 -->
50     <div class="nav">
51         <a href="javascript:;" id="register">注册信息</a>
52     </div>
53 
54     <!-- 可以移动的对话框 -->
55     <div class="d-box" id="d_box">
56         <div class="hd" id="drop">
57             <i>注册信息 (可以拖拽)</i>
58             <span id="box_close">【关闭】</span>
59         </div>
60         <div class="bd"></div>
61     </div>
62 
63     <script src="animate.js" charset="utf-8"></script>
64     <script type="text/javascript">
65         var box = document.getElementById("d_box");
66         var drop = document.getElementById("drop");
67         //先按下，在移动触动此事件
68         drop.onmousedown = function(event){
69             //获取鼠标在盒子中的坐标，将来移动的时候减去保证鼠标在盒子的指定位置
70             event = event || window.event;
71 
72             var pagex = event.pageX || scroll().left + event.clientX;
73             var pagey = event.pageY || scroll().top + event.clientY;
74             var x = pagex - box.offsetLeft;
75             var y = pagey - box.offsetTop;
76 
77             document.onmousemove = function(event){
78                 //把鼠标的坐标赋值给对话框。
79                 event = event || window.event;
80                 var xx = event.pageX || scroll().left + event.clientX;
81                 var yy = event.pageY || scroll().top + event.clientY;
82                 //二次操作鼠标位置
83                 targetx = xx - x;
84                 targety = yy - y;
85                 //给box赋值
86                 box.style.left = targetx + "px";
87                 box.style.top = targety + "px";
88                 //禁止文本选中（选中后取消）
89                 window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
90             }
91         }
92         //事件解绑
93         drop.onmouseup = function(){
94             document.onmousemove = null;
95         }
96     </script>
97 </body>
98 </html>

 

posted @ 2018-04-17 21:39  叶子玉  阅读(1833)  评论(0)  编辑  收藏  举报