Question

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

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

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

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

if（sbar＆lt; 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）。

jQuery Slide Stop在左侧位置

2 个答案: