我有用于創建可移動窗口（元素）的代碼，并且在創建新窗口時調用此函數：function dragWindow(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; elmnt.querySelector(".window-caption").onmousedown = dragMouseDown; function dragMouseDown(e) { e.preventDefault(); pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; document.onmousemove = elementDrag; } function elementDrag(e) { e.preventDefault(); pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { // alert(elmnt.id); document.onmouseup = null; document.onmousemove = null; }}https://i.stack.imgur.com/Rr3B6.gif 問題是：如果我創建一個新窗口，我無法移動他們之前創建的窗口。
2 回答
波斯汪
TA貢獻1811條經驗 獲得超4個贊
當您向上移動鼠標時，函數closeDragElement()被調用并且事件監聽器document.onmousemove被覆蓋為“null”。
注釋掉函數中的最后一行closeDragElement()可能會解決這個問題：
function closeDragElement() {
? ? ? ? // alert(elmnt.id);
? ? ? ? document.onmouseup = null;
? ? ? ? // document.onmousemove = null;
}
編輯：添加一個變量mousedown來指示鼠標是否按下。
function dragWindow(elmnt) {
? ? var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
? ? var mousedown = 0;
? ? elmnt.querySelector(".window-caption").onmousedown = dragMouseDown;
? ? function dragMouseDown(e) {
? ? ? ? e.preventDefault();
? ? ? ? mousedown++;
? ? ? ? pos3 = e.clientX;
? ? ? ? pos4 = e.clientY;
? ? ? ? document.onmouseup = closeDragElement;
? ? ? ? document.onmousemove = elementDrag;
? ? }
? ? function elementDrag(e) {
? ? ? ? e.preventDefault();
? ? ? ? if (mousedown === 0) {return;}
? ? ? ? pos1 = pos3 - e.clientX;
? ? ? ? pos2 = pos4 - e.clientY;
? ? ? ? pos3 = e.clientX;
? ? ? ? pos4 = e.clientY;
? ? ? ? elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
? ? ? ? elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
? ? }
? ? function closeDragElement() {
? ? ? ? // alert(elmnt.id);
? ? ? ? mousedown--;
? ? ? ? document.onmouseup = null;
? ? ? ? //document.onmousemove = null;
? ? }
}
- 2 回答
- 0 關注
- 121 瀏覽
添加回答
舉報
0/150
提交
取消