資訊專欄INFORMATION COLUMN
摘要：實(shí)現(xiàn)元素拖拽被移動元素必須為絕對定位待拖拽元素是否激活拖拽狀態(tài)鼠標(biāo)按下時(shí)相對于選中元素的位移監(jiān)聽鼠標(biāo)按下事件激活拖拽狀態(tài)鼠標(biāo)按下時(shí)和選中元素的坐標(biāo)偏移坐標(biāo)鼠標(biāo)按下時(shí)和選中元素的坐標(biāo)偏移坐標(biāo)監(jiān)聽鼠標(biāo)放開事件監(jiān)聽鼠標(biāo)移動事件
js實(shí)現(xiàn)元素拖拽
被移動元素必須為絕對定位
position:absolute;Dom
Javasrtipt
var moveElem = document.querySelector(".move"); //待拖拽元素
var dragging; //是否激活拖拽狀態(tài)
var tLeft, tTop; //鼠標(biāo)按下時(shí)相對于選中元素的位移
//監(jiān)聽鼠標(biāo)按下事件
document.addEventListener("mousedown", function(e) {
if (e.target == moveElem) {
dragging = true; //激活拖拽狀態(tài)
var moveElemRect = moveElem.getBoundingClientRect();
tLeft = e.clientX - moveElemRect.left; //鼠標(biāo)按下時(shí)和選中元素的坐標(biāo)偏移:x坐標(biāo)
tTop = e.clientY - moveElemRect.top; //鼠標(biāo)按下時(shí)和選中元素的坐標(biāo)偏移:y坐標(biāo)
}
});
//監(jiān)聽鼠標(biāo)放開事件
document.addEventListener("mouseup", function(e) {
dragging = false;
});
//監(jiān)聽鼠標(biāo)移動事件
document.addEventListener("mousemove", function(e) {
if (dragging) {
var moveX = e.clientX - tLeft,
moveY = e.clientY - tTop;
moveElem.style.left = moveX + "px";
moveElem.style.top = moveY + "px";
}
});
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/82018.html
摘要：原生實(shí)現(xiàn)對元素的拖拽一背景介紹此處為鋪墊內(nèi)容，可跳過隨著前端的不斷發(fā)展，各種各樣的前端規(guī)范和新知識新技術(shù)層出不窮，極大地拓展了開發(fā)者的操作空間，也大大地提升了用戶體驗(yàn)。 原生 JS 實(shí)現(xiàn)對 html 元素的拖拽 一、背景介紹 【此處為鋪墊內(nèi)容，可跳過】 隨著 Web 前端的不斷發(fā)展，各種各樣的前端規(guī)范和新知識、新技術(shù)層出不窮，極大地拓展了開發(fā)者的操作空間，也大大地提升了用戶體驗(yàn)。而隨著...
摘要：原生實(shí)現(xiàn)對元素的拖拽一背景介紹此處為鋪墊內(nèi)容，可跳過隨著前端的不斷發(fā)展，各種各樣的前端規(guī)范和新知識新技術(shù)層出不窮，極大地拓展了開發(fā)者的操作空間，也大大地提升了用戶體驗(yàn)。 原生 JS 實(shí)現(xiàn)對 html 元素的拖拽 一、背景介紹 【此處為鋪墊內(nèi)容，可跳過】 隨著 Web 前端的不斷發(fā)展，各種各樣的前端規(guī)范和新知識、新技術(shù)層出不窮，極大地拓展了開發(fā)者的操作空間，也大大地提升了用戶體驗(yàn)。而隨著...
摘要：涉及部分的，不會對理解全局產(chǎn)生干擾。在上監(jiān)聽事件，當(dāng)為畫布時(shí)，通過創(chuàng)建一個(gè)藍(lán)色虛線框移動的時(shí)候，更新的位置在上監(jiān)聽事件，落在畫布時(shí)，創(chuàng)建一個(gè)的節(jié)點(diǎn)從而完成整個(gè)拖拽添加元素的功能。 showImg(https://segmentfault.com/img/remote/1460000019564977);showImg(https://segmentfault.com/img/remot...
摘要：涉及部分的，不會對理解全局產(chǎn)生干擾。在上監(jiān)聽事件，當(dāng)為畫布時(shí)，通過創(chuàng)建一個(gè)藍(lán)色虛線框移動的時(shí)候，更新的位置在上監(jiān)聽事件，落在畫布時(shí)，創(chuàng)建一個(gè)的節(jié)點(diǎn)從而完成整個(gè)拖拽添加元素的功能。 showImg(https://segmentfault.com/img/remote/1460000019564977);showImg(https://segmentfault.com/img/remot...
閱讀 3083·2021-11-24 11:14
閱讀 3530·2021-11-22 15:22
閱讀 3216·2021-09-27 13:36
閱讀 727·2021-08-31 14:29
閱讀 1336·2019-08-30 15:55
閱讀 1769·2019-08-29 17:29
閱讀 1154·2019-08-29 16:24
閱讀 2420·2019-08-26 13:48
