js帶有虛線框的拖動效果代碼實例

原創 Return_KB 2018-09-01 23:22

分享一段代碼實例，它實現了元素拖動效果。

在拖動的時候具有一個虛線框在移動，當鬆開鼠標虛線框消失，原來的元素會被放置於此。

代碼實例如下:

[HTML] 純文本查看 複製代碼運行代碼
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>帶有虛線框的拖動效果</title>
<style>
* {
  padding: 0;
  margin: 0;
}
#box1 {
  width: 100px;
  height: 100px;
  text-align:center;
  line-height:100px;
  background: yellow;
  position: absolute;
  cursor: move;
}
#box2 {
  width: 100px;
  height: 100px;
  border: 1px dashed #000000;
  position: absolute;
  cursor: move;
}
</style>
<script>
window.onload = function() {
  var box1 = document.getElementById("box1");
  box1.onmousedown = function(event) {
    var e = event || window.event;
    var disX = e.clientX - box1.offsetLeft;
    var disY = e.clientY - box1.offsetTop;
    var maxL = document.documentElement.clientWidth - box1.offsetWidth;
    var maxT = document.documentElement.clientHeight - box1.offsetHeight;
    //創建一個新的div
    var box2 = document.createElement("div");
    box2.id = "box2";
    box2.style.left = box1.offsetLeft + "px";
    box2.style.top = box1.offsetTop + "px";
    document.documentElement.appendChild(box2);
    document.onmousemove = function (event) {
      var e = event || window.event;
      var l = e.clientX - disX;
      var t = e.clientY - disY;
      if (l <= 0) {
        l = 0;
      }
      if (t <= 0) {
        t = 0;
      }
      if (l >= maxL) {
        l = maxL;
      }
      if (t >= maxT) {
        t = maxT
      }
      box2.style.left = l + "px";
      box2.style.top = t + "px";
    };
    box2.onmouseup = function() {
      box1.style.left = box2.style.left;
      box1.style.top = box2.style.top;
      document.documentElement.removeChild(box2);
      box2.onmousemove = null;
      box2.onmouseup = null;
    };
  }
}
</script>
</head>
<body>
<div id="box1">拖動塊</div>
</body>
</html>

上面的代碼實現了我們的要求，下面介紹一下它的實現過程。

一.代碼註釋:

（1）.window.onload = function() {}，文檔內容完全加載完畢再去執行函數中的代碼。

（2）.var box1 = document.getElementById("box1")，獲取id屬性值爲box1的元素對象。

（3）.box1.onmousedown = function(event) {}，爲box1元素註冊onmousedown事件處理函數。

（4）.var e = event || window.event，兼容所有瀏覽器的時間對象。

（5）.var disX = e.clientX - box1.offsetLeft，獲取當前鼠標指針距離元素左側的距離。

（6）.var disY = e.clientY - box1.offsetTop，獲取當前鼠標指針距離元素上側的距離。（7）.var maxL = document.documentElement.clientWidth - box1.offsetWidth，元素可以向右拖動的最大值。

（8）.var maxT = document.documentElement.clientHeight - box1.offsetHeight，元素可以向上拖動的最大值。

（9）.var box2 = document.createElement("div")，創建虛線框div元素。

（10）. box2.id = "box2"，設置虛線框div元素的id屬性值。

（11）.box2.style.left = box1.offsetLeft + "px"，設置box2元素的left屬性值

（12）.box2.style.top = box1.offsetTop + "px"，設置box2的top屬性值。

（13）. document.documentElement.appendChild(box2)，將此box2添加的頁面。

（14）.document.onmousemove = function (event) {

  var e = event || window.event;

  var l = e.clientX - disX;

  var t = e.clientY - disY;

  if (l <= 0) {

    l = 0;

  }

  if (t <= 0) {

    t = 0;

  }

  if (l >= maxL) {

    l = maxL;

  }

  if (t >= maxT) {

    t = maxT

  }

  box2.style.left = l + "px";

  box2.style.top = t + "px";

}，將box2元素的可以拖動範圍限定在瀏覽器客戶區。

之所以將onmousemove 事件處理函數註冊在document上是爲了防止快速拖動導致鼠標脫離元素，失去拖動效果。

（15）.box2.onmouseup = function() {

  box1.style.left = box2.style.left;

  box1.style.top = box2.style.top;

  document.documentElement.removeChild(box2);

  box2.onmousemove = null;

  box2.onmouseup = null;

},當鼠標鬆開的時候，將box1的位置設置爲當前box2的位置。

然後刪除box2，並解綁事件處理函數。
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

JavaScript圓形鐘錶效果代碼實例

分享一段代碼實例，它實現了利用js實現了自動讀取本地時間的圓形鐘錶效果。 代碼實例如下: 0010020030040050060070080090100110120130140150160170180190200210220230

Return_KB 2020-06-24 23:20:33

js點擊當前鏈接背景變色其他鏈接恢復原來背景色

可能大家都見過這樣的效果，點擊一個鏈接背景會變色，當再點擊其他鏈接的時候，之前被點擊的鏈接背景顏色又會恢復。下面就通過代碼實例介紹一下如何實現此效果。 代碼如下: [HTML] 純文本查看 複製代碼運行代碼010203040506

Return_KB 2020-06-24 23:20:33

前端js Aes對本地存儲數據進行加密解密

1、npm install crypto-js 2、編寫LocalStorage類 const CryptoJS = require('crypto-js'); class LocalStorage { construct

IT~少年人 2020-07-08 00:02:52

JavaScript 獲取當前站點的域名和端口號

例：本地IP形式：  http://127.0.0.1:8083/admin          線上域名： https://www.csdn.net/ 獲取域名（第一種方法）：location.host   =    127.0.0.1:

花化世界 2020-06-30 05:30:26

ajax異步下載文件並判斷狀態

今日需要對公司的代碼進行更新，發現之前有的文件丟失導致下載不到直接跳轉到一個空的頁面，第一反應是應該沒有用異步請求，直接用a標籤或者表單之類的處理下載文件請求了。 但是ajax似乎是不支持下載文件的，會把流信息當初文本類處理。。。自然不能

哔哔小子 2020-06-27 23:32:30

ajax請求實用的封裝方法

個人身爲一個java後端開發，對js的閉包簡單理解爲跨方法訪問變量值，放到java裏就是方法A能使用方法B中的變量。 今天寫代碼時看到公司之前同事寫的ajax到處都是，沒有任何封裝，需要優化一下。   項目中的ajax到處都是這類代碼：

哔哔小子 2020-06-27 23:32:30

Js實時監聽input輸入框值變化

<input oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" > <script> // 監聽input輸入框信

itfallrain 2020-06-26 15:58:21

VUE 常規截取和特殊字符之前之後截取

1：平常使用的 let str = 'abcdef'; // 0 str = str.slice(0);//返回整個字符串 abcdef str = str.substring(0);//返回整個字符串 abcdef st

itfallrain 2020-06-26 15:58:16

Vue怎麼判斷對象是否爲空

1: Vue怎麼判斷對象是否爲空 JSON.stringify(evtValue)=='{}' Object.keys(xxxx).length==0 2:js判斷對象是否爲空對象的幾種方法 1.將json對象轉

itfallrain 2020-06-26 15:58:16

firefox下JS動態創建的form表單元素獲取不到值的問題

今天遇到個問題，在Firefox下用Javascript動態創建input元素，在服務器端獲取不到值。 我一點點的刪代碼，刪到最後才發現嵌套的問題。 <table> <form> <tr><td></td></tr> ...... <

超级马里奥2020 2020-06-26 15:44:19

商品搶購倒計時效果

現在比較流行商品搶購活動，爲了達到比較人性化的效果，通常有一個倒計時。 下面分享一個比較簡陋的商品搶購倒計時效果。 代碼實例如下: 010203040506070809101112131415161718192021222324

Return_KB 2020-06-24 23:20:22

動手實操 | 作爲一名美女設計師，她用 6 小時寫了個上傳七牛雲的桌面客戶端...

在這個項目上，也就是前端的工作居多。 某日，一友人因把文件上傳到 Dropbox 而引發衆怒。同時，百度網盤也越來越不好用了。我隨意吐槽之。 於是乎，就有了這個項目。某個週六深夜，寫小程序已悶死，突然想起答應友人的事情了。經過

七牛云 2020-07-05 19:10:50

程序人生 - 空調除溼與製冷的區別？

一、指代不同 1、除溼：是指整個空調處於除溼運轉狀態，du此時室內機的zhi風扇運轉很慢，目的是爲了便於空氣中的水dao氣凝結成液體達到除溼的效果。 2、製冷：製冷系統內製冷劑的低壓蒸汽被壓縮機吸入並壓縮爲高壓蒸汽後排至冷凝器，室內空氣

Lux_Sun 2020-06-30 13:47:19

React+router+redux兼容ie8下的頁面效果

在虛擬機下進行測試，性能還是相當不錯的，但不能涉及大數據刷新，ie8下不適合大數據刷新渲染，性能會差很多，簡單的頁面顯示和數據渲染是沒問題的

zjw0742 2020-06-26 09:01:34

基於rapheal圖片放大 縮小 旋轉 拖拽 雙擊

rapheal中文api：http://html5css3webapp.com/raphaelApi.htm Raphael Javascript 是一個 Javascript的矢量庫。 英文原版官網：http://raphaeljs.

画夜 2020-06-25 17:12:07