jQuery 滑动停止在左侧位置

Question

我通过设置它的 css 左位置在鼠标移动事件上定位一个div，可以在以下位置找到其演示：

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

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

无论我做什么，它似乎都超过了我设置的边界（左和右），所以左边是 -13px。

如果我将左侧位置记录到火虫中，它会进入负数，尽管我有：

if（sbar <0）

在我的代码中。

jQuery（工作示例包括上面的网址中的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）。