Здравствуйте!
У меня страница с книжной полкой, на которой 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 раз подряд (вероятно из-за количества книг), в результате чего книга "прилипает" на какое-то время к краю полки и глючит.
Пожалуйста подскажите как сделать однократный запуск события и в чем ошибка.
Спасибо!
