これでできるメモ機能ですが、メモの黒い部分をクリックするとスムーズにドラッグ&ドロップができますが、保存ボタンを押したらカーソルに合わせて引っ付いてきます(二回クリックすると離れます)。
それを直したいです!
コードの悪いところを教えてください!
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 = '保存';
modal.appendChild(saveButton);
document.body.appendChild(modal);
console.log("function");
modal.addEventListener('mousedown', mdown);
modal.addEventListener('touchstart', mdown);
// "マウスが押された際の関数"
function mdown(e){
console.log("mdown");
this.classList.add("drag");
//タッチドイベントとマウスのイベントの差異を吸収
if(e.type === "mousedown") {
var event = e;
} else {
var event = e.changedTouches[0];
}
//要素内の相対座標を取得
posX = event.pageX - this.offsetLeft;
posY = event.pageY - this.offsetTop;
//ムーブイベントにコールバック
document.body.addEventListener("mousemove", mmove);
document.body.addEventListener("touchmove", mmove);
}
// "マウスカーソルが動いたときに発火"
function mmove(e){
console.log("mmove");
//ドラッグしている要素を取得
var drag = document.getElementsByClassName("drag")[0];
//同様にマウスとタッチの差異を吸収
if(e.type === "mousemove") {
var event = e;
} else {
var event = e.changedTouches[0];
}
//フリックしたときに画面を動かさないようにデフォルト動作を抑制
e.preventDefault();
//マウスが動いた場所に要素を動かす
drag.style.top = event.pageY - posY + "px";
drag.style.left = event.pageX - posX + "px";
//マウスボタンが離されたとき、またはカーソルが外れたとき発火
drag.addEventListener("mouseup", mup);
document.body.addEventListener("mouseleave", mup);
drag.addEventListener("touchend", mup);
document.body.addEventListener("touchleave", mup);
}
// "マウスボタンが上がったら発火"
function mup(e){
console.log("mup");
var drag = document.getElementsByClassName("drag")[0];
//ムーブベントハンドラの消去
document.body.removeEventListener("mousemove", mmove);
drag.removeEventListener("mouseup", mup);
document.body.removeEventListener("touchmove", mmove);
drag.removeEventListener("touchend", mup);
//クラス名 .drag も消す
drag.classList.remove("drag");
}
});