CODEWITHSUNDEEP
jquerysliderposition
StuR
StuR

Reputation: 12218

jQuery Slide Stop at left position

I'm positioning a div on a mousemove event by setting it's css left position, a demo of which can be found at:

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

What I'm having trouble with is setting the left and right boundaries for it to stop.

No matter what I do it seems to go over the boundaries (left and right) that I set, so goes -13px left.

If I log the left position into firebug it goes into minus figures despite the fact I have:

if(sbar < 0)

in my code.

The jQuery (working example including html at the above url):

$(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);
    }
}

Upvotes: 0

Views: 490

Answers (2)

DarthJDG
DarthJDG

Reputation: 16591

Why reinvent the wheel? jQuery UI has a proper draggable implementation, without the nasty bugs that you'll need to deal with yourself, like stuck dragging when the mouse leaves the window, accidental text selection preventing the next drag, etc. You can even build a custom jQuery UI file on the website if you don't need the whole thing to keep the codebase shorter. Check out this fiddle: http://jsfiddle.net/JLtT3/54/

Implementation with 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
        }
    });
});

Upvotes: 2

James Montagne
James Montagne

Reputation: 78650

Should this:

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

really be this:

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

?

You seem to be checking that the current position (sbarLeft) is not past the left boundary instead of the new position (moveXposition).

Upvotes: 1

Related Questions