分享一段代碼實例,它實現了元素拖動效果。 在拖動的時候具有一個虛線框在移動,當鬆開鼠標虛線框消失,原來的元素會被放置於此。 代碼實例如下:
上面的代碼實現了我們的要求,下面介紹一下它的實現過程。 一.代碼註釋: (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,並解綁事件處理函數。 |
js帶有虛線框的拖動效果代碼實例
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.