Многократный вызов функции
 

Здравствуйте!
У меня страница с книжной полкой, на которой 5 книг. Книги можно таскать по полке и менять местами, все почти готово. Книги таскаются и меняются местами.

Событие перетаскивания книги привязано на зажатие кнопки мыши, на "отжатие" - соответственно остановка книги. На данный момент книга останавливается только в том случае, если в момент "отжатия" курсор находится над книгой. Хотелось бы сделать так, чтобы"отжатие" срабатывало в любом месте документа.

Весь код можно посмотреть тут.

//Конструктор объекта "книга"
var Book = function ($dom, $shelf) {
    this.$ = $dom;
    this.width = this.$.width();
    this.x = parseInt(this.$.css('left'));
    this.$shelf = $shelf;
    this.$.data('book', this);
    this.init();
}

//Инициализация обработчиков книги
Book.prototype.init = function () {
    this.$.mousedown(this.handlers.mousedown);
    this.$.mouseup(this.handlers.mouseup);
}
//Назначение обработчиков
Book.prototype.handlers = {
    mousedown:function (e) {
        var book = $(this).data('book');
        book.onMousedown(book.getX(e.pageX));
    },
    mouseup:function () {
        Book.getActive().onMouseup();
    },
    mousemove:function (e) {
        var book = Book.getActive();
        book.onMove(book.getX(e.pageX));
    }
};

//Методы объекта книга
//Управлеие
Book.prototype.onMousedown = function (x) {
    Book.setActive(this);
    this.currentDelta = this.getDelta(x);
    this.$.css({
        'z-index' : '100',
        'cursor' : 'crosshair'
    });
    $(document).bind('mousemove', this.handlers.mousemove);
};

Book.prototype.onMouseup = function () {
    $(document).unbind('mousemove', this.handlers.mousemove);
    this.x = parseInt(this.$.css('left'));
    this.$.css({
        'z-index' : '5',
        'cursor' : 'default'
    });
    this.plaseInit();
};

Book.prototype.onMove = function (x) {
//    this.$.css('left', Math.max(Math.min(this.$shelf.width() - this.width,x - this.currentDelta),0));
    if (x - this.currentDelta > 2 && (x - this.currentDelta) < this.$shelf.width() - this.width - 2) {
        this.$.css('left', x - this.currentDelta);
    } else {

    }

    if (this.getNext()) {
        if (this.getCenter() > this.getNext().x) {
            this.getNext().moveBeack();
            this.insertAfter(this.getNext());
        }
    }
    if (this.getPrev()) {
        if (this.getCenter() < this.getPrev().getRightX()) {
            this.getPrev().moveFront();
            this.insertBefore(this.getPrev());
        }
    }
    return false;
};

Для того чтобы событие onMouseup срабатывало вне книги пробовал сделать так:

//Инициализация обработчиков книги
Book.prototype.init = function () {
    this.$.mousedown(this.handlers.mousedown);
    $(document).mouseup(this.handlers.mouseup);
}

В таком варианте событие mouseup срабатывает 5 раз подряд (вероятно из-за количества книг), в результате чего книга "прилипает" на какое-то время к краю полки и глючит.

Пожалуйста подскажите как сделать однократный запуск события и в чем ошибка.

Спасибо!

Всем спасибо, разобрался!