javascript - JQuery なしでドラッグ可能な要素

Question

私は自分のプロジェクトの 1 つでドラッグ可能なライブラリを作成しようとしていますが、要素をドラッグ可能にするのに少し苦労しています。要素がコンテナの上部に触れると、マウスを上に動かすほどリバウンドし始め、ランダムに動かなくなります。なぜこれを行っているのか、誰もが何らかの考えを持っています。私はそれを防ぐためにチェックを入れました.

    SetDragHandlers: function(Obj,ObjIsHandler,Container) /* If the object is the handler, then its parent is the thing that will be moved */
    {
        var ToMove = (!ObjIsHandler ? Obj : Obj.parentNode),
            HandleStyles,
            ObjStyles,
            ContainerStyles,
            ObjLeft,
            ObjTop,
            ObjWidth,
            ObjHeight,
            HandleWidth,
            HandleHeight,
            ContainerWidth,
            ContainerHeight,
            MouseX,
            MouseY;

        var MoveListener = function(e)
        {
            var MouseX_New = Dragger.MouseX(e),
                MouseY_New = Dragger.MouseY(e),
                MouseX_Diff = (MouseX > MouseX_New ? MouseX - MouseX_New : MouseX_New - MouseX),
                MouseY_Diff = (MouseY > MouseY_New ? MouseY - MouseY_New : MouseY_New - MouseY),
                ObjTop_New = ObjTop + MouseY_Diff,
                ObjLeft_New = ObjTop + MouseX_Diff;
            Dragger.log(MouseX_New);
            if
            (
                ObjTop_New + ObjHeight > ContainerHeight || ObjTop < 0
                ||
                ObjLeft_New + ObjWidth > ContainerWidth || ObjLeft < 0
                ||
                MouseX < 0 || MouseY < 0 || MouseX > window.innerWidth || MouseY > window.innerHeight
            ) /* Would go out of bounds */
                return;

            if(ToMove.style.top == '' || ToMove.style.top == null)
                ToMove.setAttribute('style',ToMove.getAttribute('style') + 'top:' + ObjTop_New + 'px;' + 'left:' + ObjLeft_New + 'px;');
            else
            {
                ToMove.style.top = ObjTop_New + 'px'; /* Some px are taken away so the cursor will throw mouseup when the mouse is up. Without this the cursor would be too far to the left or too far up and now throw it */
                ToMove.style.left = ObjLeft_New + 'px';
            }
            e.preventDefault();
        };

        Dragger.AddEventListener(Obj,'mousedown',function(e){
            if(e.which != 1) /* Left mouse button not down */
                return;
            /* Redefine the vars incase they have changed */
            HandleStyles = Dragger.GetFinalStyles(Obj);
            ObjStyles = Dragger.GetFinalStyles(ToMove);
            ContainerStyles = (Container == null || Container == undefined
                                ?
                                    {
                                        height: window.innerHeight + 'px', /* This is done so that less checks need to be done further on. This makes an object we can get the containers width and height from */
                                        width: window.innerWidth + 'px'
                                    }
                                :
                                    Dragger.GetFinalStyles(Container) /* This is generated fresh every time so the container can be resized without trouble */
                              );
            /* The object that will be moving */
            ObjLeft = ObjStyles.left.replace('px','');
            ObjTop = ObjStyles.top.replace('px','');
            ObjWidth = ObjStyles.width.replace('px','');
            ObjHeight = ObjStyles.height.replace('px','');

            /* The object the user has clicked and dragged to move it */
            HandleWidth = HandleStyles.width.replace('px','');
            HandleHeight = HandleStyles.height.replace('px','');

            /* The container the object will move about inside */
            ContainerWidth = ContainerStyles.width.replace('px','');
            ContainerHeight = ContainerStyles.height.replace('px','');

            /* The mouse position */
            MouseX = Dragger.MouseX(e);
            MouseY = Dragger.MouseY(e);

            Dragger.AddEventListener(document,'mousemove',MoveListener);
            e.preventDefault();
        });

        Dragger.AddEventListener(Obj,'mouseup',function(e){
            if(e.which != 1) /* Left mouse button not down */
                    return;
            Dragger.RemoveEventListener(document,'mousemove',MoveListener)
        })
    }