没有JQuery的可拖动元素

时间:2013-08-12 22:43:57

标签: javascript html draggable

我正在努力为我的一个项目创建一个可拖动的库,但我正在努力使元素可拖动。当元素接触到容器的顶部时,它开始反弹,你移动鼠标越多,它也会随机卡住。任何人都有任何想法,为什么它这样做,我甚至插入支票试图阻止它。

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

0 个答案:

没有答案