溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關js實現簡易拖拽的案例的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。
代碼實例
<div id="box" ></div>
(function () {
var dragging = false
var boxX, boxY, mouseX, mouseY, offsetX, offsetY
var box = document.getElementById('box')
// 鼠標按下的動作
box.onmousedown = down
// 鼠標的移動動作
document.onmousemove = move
// 釋放鼠標的動作
document.onmouseup = up
// 鼠標按下后的函數,e為事件對象
function down(e) {
dragging = true
// 獲取元素所在的坐標
boxX = box.offsetLeft
boxY = box.offsetTop
// 獲取鼠標所在的坐標
mouseX = parseInt(getMouseXY(e).x)
mouseY = parseInt(getMouseXY(e).y)
// 鼠標相對元素左和上邊緣的坐標
offsetX = mouseX - boxX
offsetY = mouseY - boxY
}
// 鼠標移動調用的函數
function move(e){
if (dragging) {
// 獲取移動后的元素的坐標
var x = getMouseXY(e).x - offsetX
var y = getMouseXY(e).y - offsetY
// 計算可移動位置的大小， 保證元素不會超過可移動范圍
var width = document.documentElement.clientWidth - box.offsetWidth
var height = document.documentElement.clientHeight - box.offsetHeight
// min方法保證不會超過右邊界，max保證不會超過左邊界
x = Math.min(Math.max(0, x), width)
y = Math.min(Math.max(0, y), height)
// 給元素及時定位
box.style.left = x + 'px'
box.style.top = y + 'px'
}
}
// 釋放鼠標的函數
function up(e){
dragging = false
}
// 函數用于獲取鼠標的位置
function getMouseXY(e){
var x = 0, y = 0
e = e || window.event
if (e.pageX) {
x = e.pageX
y = e.pageY
} else {
x = e.clientX + document.body.scrollLeft - document.body.clientLeft
y = e.clientY + document.body.scrollTop - document.body.clientTop
}
return {
x: x,
y: y
}
}
})()代碼解析
在 document 對象上綁定 mousemove 和 mouseup 事件，不在拖拽的元素上綁定是因為當鼠標移動太快而超出元素的范圍時會停止拖拽，而綁定在 document 上則可以避免這樣的事情發生。拖拽再快都不會超出 document 的范圍。
// 鼠標按下的動作 box.onmousedown = down // 鼠標的移動動作 document.onmousemove = move // 釋放鼠標的動作 document.onmouseup = up
HTMLElement.offsetLeft是一個只讀屬性，返回當前元素左上角相對于HTMLElement.offsetParent 節點的左邊界偏移的像素值。
// 獲取元素所在的坐標 boxX = box.offsetLeft boxY = box.offsetTop
一般鼠標的位置使用 pageX / pageY 獲取，但是 IE 不支持這兩個屬性。所以在 IE 中使用 event.clientX + document.body.scrollLeft - document.body.clientLeft; 獲取鼠標的位置
if (e.pageX) {
x = e.pageX
y = e.pageY
} else {
x = e.clientX + document.body.scrollLeft - document.body.clientLeft
y = e.clientY + document.body.scrollTop - document.body.clientTop
}scrollWidth,clientWidth,offsetWidth的區別
定義
情況一
元素內無內容或者內容不超過可視區，滾動不出現或不可用
scrollWidth = clientWidth
offsetWidth為元素的實際寬度
情況二
元素的內容超過可視區，滾動條出現和可用
scrollWidth > clientWidth
offsetWidth為元素的實際寬度
offsetX,clientX,pageX的辨析
offsetX,offsetY
指鼠標指針相對于觸發事件元素的左上角的偏移，在Chrome，Opera,Safari中指外邊緣，即將該元素邊框的寬度計算在內，firefox則不包含邊框值
pageX,pageY
指相對文檔窗口左上角的距離，不會隨滾動條移動
clientX,clientY
指相對于瀏覽器可視窗口左上角的距離，參照點會隨滾動條滾動而移動
感謝各位的閱讀！關于js實現簡易拖拽的案例就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
