if (element) {
element.onmousedown = function (ev: any) {
ev.stopPropagation()
element.style.transition =
'hover cubic-bezier(0.25, 0.1, 0.25, 1) 0.64s';
const disX = ev.clientX;
const disY = ev.clientY;
const ex = disX - element.offsetLeft;
const ey = disY - element.offsetTop;
// document添加鼠標(biāo)移動
document.onmousemove = function (ev) {
const w1 = ev.clientX;
const y1 = ev.clientY;
element.style.left = w1 - ex + 'px';
element.style.top = y1 - ey + 'px'
};
// document添加鼠標(biāo)浮起事件
document.onmouseup = (e: any) => {
ev.stopPropagation()
setTimeout(() => {
const x = e.clientX;
const y = e.clientY;
document.onmousemove = null;
document.onmouseup = null;
}, 100);
};
};
}
純js實現(xiàn)拖拽dom小結(jié)
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 開發(fā)「bufpay.com 個人即時到賬收款平臺」后臺需要支持開發(fā)者的微信和支付寶二維碼上傳。 原來的方式是點擊 ...
- 好的,這次來看看用純js如何實現(xiàn)拖拽運動。源碼已上傳到github,需要的可以下載 https://github...
- 被移動元素必須為絕對定位position:absolute; Dom Javasrtipt 下面是一個封裝好的函數(shù)...