jQuery滑动停止在左侧位置

我在mousemove事件中设置了一个div的css左位置，可以在以下位置找到该div的演示：

我遇到的问题是设置它停止的左右边界

无论我做什么，它似乎都超出了我设定的界限（左和右），所以-13px向左

如果我把左边的位置记录到firebug中，它会变成负数，尽管我有：

如果（sbar<0）

在我的代码中

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

$（文档）.ready（函数（）{
var statusbar=$（“.jspDrag”）；
statusbar.mousedown（函数（事件）{
handleMouseDown（事件，本）；
});
$（“body”）.mouseup（函数（事件）{
handleMouseUp（事件，本）；
});
});
功能手柄向下（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；
如果（e.button==0）
{
$（“body”）.bind（'mousemove'，函数（事件）{
handleMouseMove（事件，$（sbar）、sbarPosition、endLeftPosition、endRightPosition）；
});
}
}
功能手柄安装（e、sbar）{
$（“body”）.unbind（'mousemove'）；
}
功能手柄移动（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

如果：

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

if（（sbarLeft>=endLeftPosition）和&（moveXposition

真的是这样：

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

if（（moveXposition>=endLeftPosition）&（moveXposition

?

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

如果：

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

if（（sbarLeft>=endLeftPosition）和&（moveXposition

真的是这样：

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

if（（moveXposition>=endLeftPosition）&（moveXposition

?

---

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

为什么要重新发明轮子？jQuery UI有一个适当的可拖动实现，没有您需要自己处理的讨厌的错误，比如鼠标离开窗口时被卡住的拖动，意外的文本选择阻止了下一次拖动，等等。如果不需要全部操作，您甚至可以在网站上构建自定义jQuery UI文件保持代码库较短。查看此提琴：

使用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
        }
    });
});

---

为什么要重新发明轮子呢？jQuery UI有一个适当的可拖动实现，没有你需要自己处理的讨厌的错误，比如鼠标离开窗口时被卡住的拖动，意外的文本选择阻止了下一次拖动，等等。如果你不需要整个过程，你甚至可以在网站上构建一个自定义的jQuery UI文件代码库较短。请查看此小提琴：

使用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
        }
    });
});

---

如果可能的话，我希望不使用ui，因为我希望这个应用程序尽可能轻量级，这是我使用ui唯一能从中受益的代码，我说过，为了我必须克服的错误，我明智地使用它。如果你去，你可以定制你的包，如果你只想拖拽，选择

Core、Widget、Mouse、Dragable

没有主题，它只生成了28.4k的小.js文件。如果可能的话，我想不使用ui，因为我希望这个应用程序尽可能轻量级，这是我使用ui时唯一受益的一点代码，我说过，为了克服我必须克服的bug，我将使用wise使用它。如果你去你可以定制你的包，如果你只想要Dragable，选择

Core，Widget，Mouse，Dragable

，没有主题，它只生成了28.4k的小.js文件。