jQuery Slide 停止在左侧位置

Question

我通过设置 div 的 css 左侧位置来将 div 定位在 mousemove 事件上，可以在以下位置找到演示：

http://jsfiddle.net/JLtT3/53/

我遇到的问题是设置左右边界以使其停止。

无论我做什么，它似乎都会超出我设置的边界（左和右），所以向左移动 -13px。

如果我将左侧位置记录到 firebug 中，它会变成负数，尽管我

有if(sbar < 0)

的代码中

。 jQuery（工作示例包括上述 url 中的 html）：

$(document).ready(function() {
    var statusbar = $(".jspDrag");

    statusbar.mousedown(function(event) {
        handleMouseDown(event, this);
    });

    $("body").mouseup(function(event) {
        handleMouseUp(event, this);
    });
});

function handleMouseDown(e, sbar) {
    var sbarPosition = $(sbar).position();
    var sbarPosition = e.pageX - sbarPosition.left;
    var endRightPosition = $('.jspCapRight').position();
    var endRightPosition = endRightPosition.left - $(sbar).width();
    var endLeftPosition = $('.jspCapLeft').position();
    var endLeftPosition = endLeftPosition.left;

    if (e.button == 0) 
    {
        $("body").bind('mousemove', function(event) {
            handleMouseMove(event, $(sbar), sbarPosition, endLeftPosition, endRightPosition);
        });
    }
}

function handleMouseUp(e, sbar) {
    $("body").unbind('mousemove');
}

function handleMouseMove(e, sbar, sbarMousePosition, endLeftPosition, endRightPosition) {
    var moveXposition = e.pageX - sbarMousePosition;
    var sbarLeft = $(sbar).position();
    var sbarLeft = sbarLeft.left;
    console.log(sbarLeft); //firebug

    if ((sbarLeft >= endLeftPosition) && (moveXposition < endRightPosition)) 
    {
        $(sbar).css('left', moveXposition);
    }
}

Answer 1

为什么要重新发明轮子？ jQuery UI 具有适当的可拖动实现，没有您需要自己处理的令人讨厌的错误，例如鼠标离开窗口时拖动被卡住、意外的文本选择阻止下一次拖动等。您甚至可以构建自定义 jQuery UI如果您不需要整个内容来保持代码库更短，请在网站上文件。看看这个小提琴： http://jsfiddle.net/JLtT3/54/

使用 jQuery UI 实现：

$(document).ready(function() {
    $(".jspDrag").draggable({
        containment: '.jspHorizontalBar',
        axis: 'x',
        drag: function(event,ui){
            //do your stuff, ui.position.left is the current position
        }
    });
});

Answer 2

这应该是：

if ((sbarLeft >= endLeftPosition) && (moveXposition < endRightPosition)) 

真的是这样吗

if ((moveXposition>= endLeftPosition) && (moveXposition < endRightPosition)) {

？

您似乎正在检查当前位置（sbarLeft）是否超过左边界，而不是新位置（moveXposition）。