本文實(shí)例為大家分享了js實(shí)現(xiàn)限定區(qū)域范圍拖拉拽的具體代碼，供大家參考，具體內(nèi)容如下

需要在范圍內(nèi)拖拉拽，之前看來許多資料覺得都不是特別滿足要求，今天自己寫了一個(gè)，通過監(jiān)聽鼠標(biāo)按下、鼠標(biāo)抬起、鼠標(biāo)移動(dòng)事件來控制

代碼如下

Document

#drag {

background: aqua;

width: 200px;

height: 200px;

position: absolute;

-moz-user-select: none;

-khtml-user-select: none;

user-select: none;

}

#parent {

position: relative;

background: #cde4dc;

height: 80vh;

overflow: hidden;

}

這是一個(gè)測(cè)試

//自執(zhí)行函數(shù),需要拖拽的元素需要設(shè)置position:absolute,父元素position:relative

//有傳父親節(jié)點(diǎn)、若無則默認(rèn)body為父節(jié)點(diǎn)

((parent, children, mouseType) => {

if (!children) return;

let childrenDiv = document.querySelector(children);

childrenDiv.style.position = 'absolute';

let parentDiv = parent

? document.querySelector(parent)

: document.querySelector('body');

let isDown = false;

let x,

y,

l,

t = 0;

childrenDiv.onmousedown = function (e) {

x = e.clientX;

y = e.clientY;

// 獲取左部和底部的偏移量

l = childrenDiv.offsetLeft;

t = childrenDiv.offsetTop;

isDown = true;

childrenDiv.style.cursor = mouseType || 'move';

};

// 鼠標(biāo)移動(dòng)

window.onmousemove = function (e) {

if (!isDown) {

return;

}

//獲取移動(dòng)后的x和y坐標(biāo)

let nx = e.clientX;

let ny = e.clientY;

//獲取父元素的寬高

let parentWidth = parentDiv.clientWidth;

let parentHeight = parentDiv.clientHeight;

//獲取子元素的寬高

let childrenWidth = childrenDiv.clientWidth;

let childrenHight = childrenDiv.clientHeight;

// 計(jì)算移動(dòng)后的左偏移量和頂部偏移量

let nLeft = nx - (x - l);

let nTop = ny - (y - t);

let nRight = nLeft + childrenWidth;

let nBottom = nTop + childrenHight;

nLeft = nLeft <= 0 ? 0 : nLeft; //判斷左邊距離是否越界

nTop = nTop <= 0 ? 0 : nTop; //判斷上邊距離是否越界

//判斷右邊距離大于父元素寬度

if (nRight >= parentWidth) {

nLeft = parentWidth - childrenHight;

}

// 判斷下邊界是否越界

if (nBottom >= parentHeight) nTop = parentHeight - childrenHight;

childrenDiv.style.left = nLeft + 'px';

childrenDiv.style.top = nTop + 'px';

};

// 鼠標(biāo)抬起事件

document.onmouseup = function (e) {

//鼠標(biāo)抬起

isDown = false;

childrenDiv.style.cursor = 'default';

};

})('#parent', '#drag', 'move');

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

總結(jié)

以上是生活随笔為你收集整理的java实现坐标图进行拖拉拽放_js实现限定区域范围拖拉拽效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。