0

我正在尝试为我的一个项目制作一个可拖动的库之类的东西，但我在使元素可拖动方面有点挣扎。当元素接触到容器顶部时，它开始反弹，您将鼠标向上移动的次数越多，它也会随机卡住。任何人都知道为什么会这样做，我什至进行了检查以防止它发生。

    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)
        })
    }
4

0 回答 0