AMIR
4 سال پیش توسط AMIR مطرح شد
0 پاسخ

حذف event در جاوا اسکریپت

سلام ،این کد برای اینکه یک المان رو توی صفحه بشه حرکت داد اما میخام وقتی که کاربر کلیک رو رها میکنه در واقع توی 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 کمک کنید تا مشکل خودش را حل کند؛ این‌طور می‌توانیم با هم پیشرفت کنیم.

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام