سلام ،این کد برای اینکه یک المان رو توی صفحه بشه حرکت داد اما میخام وقتی که کاربر کلیک رو رها میکنه در واقع توی mouseup ایونت mousemove کنسل بشه ولی تیکه کد پایین کار نمیکنه
class dragEl {
constructor(options) {
let el = this.element = options.el;
this.addHandler(el);
}
addHandler(element) {
element.addEventListener('mousedown', this.handlemousedown.bind(this));
document.addEventListener('mouseup', this.handlemouseup.bind(this));
}
//handler functions
handlemousedown(e) {
let element = this.element;
this.cursorX = e.clientX;
this.cursorY = e.clientY;
document.addEventListener('mousemove', this.handlemousemove.bind(this));
};
handlemousemove(e) {
e = e || window.event;
let elmnt = this.element;
//get the distance that element moved;
let cursorMoveDistanceX = this.cursorX - e.clientX;
let cursorMoveDistanceY = this.cursorY - e.clientY;
//need to set valuse again for next move and next caculate;
this.cursorX = e.clientX;
this.cursorY = e.clientY;
//sum previous offset with new offset , op is nagative because always offset is from left and top more;100 - 120 = -20 -> you move left:-20px to right
elmnt.style.top = (elmnt.offsetTop - cursorMoveDistanceY) + "px";
elmnt.style.left = (elmnt.offsetLeft - cursorMoveDistanceX) + "px";
};
handlemouseup(e) {
console.log('mouse-up' )
document.removeEventListener('mouseup', this.handlemouseup.bind(this));
document.removeEventListener('mousemove',this.handlemousemove.bind(this));
};
}
let dragIt = new dragEl({
el: document.querySelector('#mydiv'),
})
به AMIR کمک کنید تا مشکل خودش را حل کند؛ اینطور میتوانیم با هم پیشرفت کنیم.
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟