حذف 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'),
    })