You aren’t specifying the correct function to unbind. You passed an anonymous function to bind(), not draggable.init. Well, you didn’t directly call bind, but .mousedown() is just a convenience method for it.
Use a named function, or even just unbind all handlers for the mousemove event.
That’s what I did (but I had $(this) instead) when I tried that method. But it didn’t work as I had to have my mouse over the ID before I could let go of it otherwise the unbind event would not happen.
Alright I got the majority of it working. I’m hoping you can help me out in the last part of it.
I’m still having issues with the mouse up event. It works as intended when you let go of the mouse within the DIV. But if you let go of the mouse outside the DIV, it doesn’t unbind it right. I thought the fix would be to bind the event to the body, but no such luck.
To reproduce the problem:
Mouse down on the container.
Move your mouse outside the scroll bar and move the box around a little.
Let go of the box. At this point, the box should not be moving, but you can still move it even though you unbinded it on mouse up.
To stop the box from moving, click the box again and it will stop moving.
$(document).ready(function() {
$('#scrollBar').scrollbar({
min: -100,
initial: 0,
max: 150,
box: 15
});
});
(function($) {
$.fn.scrollbar = function(options) {
var _self = $(this);
var defaults = {
min: -100,
initial: 0,
max: 100,
box: 15
};
var options = $.extend(defaults, $.fn.scrollbar.defaults, options);
_self.mousedown(function() {
$('body').mousemove(function(e) {
var x = e.pageX;
if (x <= options.max && x >= options.box)
_self.css({'left' : x});
});
}).mouseup(function() {
$('body').unbind('mousemove');
});
return this;
};
})(jQuery);
_self will not be likely to refer to the window or body under normal use. It’s going to refer to #scrollBar
Again, use the mouseup event that occurs on the window, to unbind your mousemove handler. You would do this like
$(window).mouseup(myFunctionThatUnbinds);