This is a memo function that allows you to drag and drop smoothly by clicking on the black part of the memo, but when you press the save button, it sticks to the cursor (two clicks away).
I want to fix it!
Please tell me what's wrong with the code!
const save=(content)=>{//save(textbox.value)
chrome.runtime.sendMessage(content,res=>{
console.log(res);
});
};
chrome.runtime.onMessage.addListener(message, sender, sendResponse)=>{
const modalfrm= document.getElementById('ex-memo');
if(modalfrm!=null)return;
const modal= document.createElement('div');
modal.id = 'ex-memo';
// modal.style.width='500px';
// modal.style.height='100px';
modal.style.zIndex='2147483647';
modal.style.position='fixed';
modal.style.left=`${message.posX}px`;
modal.style.top=`${message.posY}px`;
console.log("modal.style.left:" +modal.style.left);
console.log("modal.style.top:"+modal.style.top);
console.log("modal.style.width:" + modal.style.width);
console.log("modal.style.height:"+modal.style.height);
const textbox= document.createElement('textarea');
textbox.style.width='600px';
textbox.style.height='200px';
textbox.style.backgroundColor='rgb(67,67,67)';
textbox.style.color='rgb(51,166,184)';
textbox.value=message.content;
modal.appendChild(textbox);
const saveButton= document.createElement('button');
saveButton.onclick=()=>save(textbox.value);
saveButton.innerText='Save';
modal.appendChild(saveButton);
document.body.appendChild(modal);
console.log("function");
modal.addEventListener ('musedown', mdown);
modal.addEventListener('touchstart',mdown);
// "Function when mouse is pressed"
function mdown(e){
console.log("mdown");
This.classList.add("drag");
// Absorbs differences between touched and mouse events
if(e.type==="mousedown"){
var event=e;
} else{
var event=e.changedTouches[0];
}
// Get relative coordinates in elements
posX=event.pageX-this.offsetLeft;
posY = event.pageY-this.offsetTop;
// Callback to Move Event
document.body.addEventListener("mousemove", mmove);
document.body.addEventListener("touchmove", mmove);
}
// "Fire when mouse cursor moves"
function mmove(e){
console.log("mmove");
// Get the element you are dragging
vardrag= document.getElementsByClassName("drag")[0];
//Similarly absorbs the difference between mouse and touch
if(e.type==="mousemove"){
var event=e;
} else{
var event=e.changedTouches[0];
}
// Suppresses default behavior so that the screen does not move when flicking
e.preventDefault();
// Move the element where the mouse moved
drag.style.top =event.pageY-posY+"px";
drag.style.left=event.pageX-posX+"px";
// Fire when mouse button is released or cursor is released
drag.addEventListener("mouseup",mup);
document.body.addEventListener("mouseleave",mup);
drag.addEventListener("touchend",mup);
document.body.addEventListener("touchleave",mup);
}
// "Fire when the mouse button is up"
function mup(e){
console.log("mup");
vardrag= document.getElementsByClassName("drag")[0];
// Clearing the Move Event Handler
document.body.removeEventListener("mousemove", mmove);
drag.removeEventListener("mouseup",mup);
document.body.removeEventListener("touchmove", mmove);
drag.removeEventListener("touchend",mup);
// Also erase class name .drag
drag.classList.remove("drag");
}
});
The reason is that the mousedown
event when you click the save button causes the bubble up to the modal
element to launch the mmove()
function. The mouseup
event handler is not registered and the function mup()
is not called when you click.After clicking, the mousemove
event fires, and the mouseup
event handler is also registered, but the button is already separated, so it is left dragging.
In addition to the save button, you may be left dragging wherever you click in the modal
.
The solution is to always register the mouseup
event handler mup()
(not in mmove()
.
© 2024 OneMinuteCode. All rights reserved.