元素的移動

時間 2019-11-24

標籤元素移動欄目無線简体版

原文原文鏈接

個人想法：html

1.首先給移動的元素一個絕對定位，position: absolute, 經過top和left來實現元素的移動。spa

2. 基本過程：(1)當鼠標的左鍵按下去時，給元素添加onmousemove, onmouseleave(鼠標不在元素上時，移除onmousemove事件),code

　　　　　　　　　　onmouseup(一個移動的完整操做)事件，並觸發該元素的 onmousemove 事件。htm

　　　　　　(2) 記錄鼠標的移動前和移動後的水平和垂直位置，他們的差值就是元素在水平和垂直的移動距離，再減去鼠標在移動元素上的相對的水平和垂直位置blog

　　　　　　　　　　，最後獲得元素移動的目的地(位置)。事件

  1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5 
  6 <meta charset="UTF-8">
  7 
  8 <title></title>
  9 
 10 <style>
 11 
 12 *{
 13 
 14 padding: 0px;
 15 
 16 margin: 0px;
 17 
 18 }
 19 
 20 body{
 21 
 22 width: 100%;
 23 
 24 height: 100%;
 25 
 26 background-color: #204D74;
 27 
 28 }
 29 
 30 div{
 31 
 32 position: absolute;
 33 
 34 width: 400px;
 35 
 36 height: 100px;
 37 
 38 background-color: #008000;
 39 
 40 cursor: pointer;
 41 
 42 }
 43 
 44 </style>
 45 
 46 </head>
 47 
 48 <body>
 49 
 50 <div onmousedown="startDrop(event)"></div>
 51 
 52 </body>
 53 
 54 <script>
 55 
 56 var mouseCurrentX;
 57 
 58 var mouseCurrentY;
 59 
 60 var moveX = 0;
 61 
 62 var moveY = 0;
 63 
 64 function startDrop(e) {
 65 
 66 mouseCurrentX = e.clientX;
 67 
 68 mouseCurrentY = e.clientY;
 69 
 70 console.log('開始拖動');
 71 
 72 if (e.target.addEventListener) {
 73 
 74 e.target.addEventListener('mousemove', mouseMove, false);
 75 
 76 e.target.addEventListener('mouseup', stopMove, false);
 77 
 78 e.target.addEventListener('mouseleave', stopMove, false);
 79 
 80 }else if (attachEvent){
 81 
 82 e.target.attachEvent('onmousemove', mouseMove, false);
 83 
 84 e.target.attachEvent('onmouseup', stopMove, false);
 85 
 86 }
 87 
 88 }
 89 
 90 function mouseMove(e) {
 91 
 92 console.log('正在移動');
 93 
 94 moveX = e.clientX - mouseCurrentX;
 95 
 96 moveY = e.clientY - mouseCurrentY;
 97 
 98 var x = e.clientX - e.offsetX + moveX;
 99 
100 var y = e.clientY - e.offsetY + moveY;
101 
102 e.target.style.top = y + 'px';
103 
104 e.target.style.left = x + 'px';
105 
106 mouseCurrentX = e.clientX;
107 
108 mouseCurrentY = e.clientY;
109 
110 console.log('元素當前的座標爲: ' + x + ',' + y);
111 
112 }
113 
114 function stopMove(e){
115 
116 console.log('結束移動');
117 
118 e.target.removeEventListener('mousemove', mouseMove);
119 
120 }
121 
122 </script>
123 
124 </html>

***********************************************************ip

2018-08-10rem

但感受還有寫小毛病，歡迎指點(致電) 。get

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。