Я использую rapaeljs для своего веб-приложения. Я хочу установить dropable boundries объекта. Объект может перемещаться в области видимости. После того, как объект попадет в область видимости, для объекта не должно быть выхода.
Raphaeljs перетаскивание
Ответ 1
Рафаэль построил поддержку перетаскивания через .drag()
. Используйте его в форме element.drag(start, move, up);
. Если три аргумента - это 3 ссылки на функции, которые вы пишете, которые связаны с событиями mousedown, motion и mouseup соответственно.
Обратите внимание, что для хранения начальных позиций используются this.ox
и this.oy
, а для движения используются dx
и dy
.
Следующий реализует перетаскивание на поле. Коробка всегда можно перемещать, но как только она попадает в "тюрьму", ее нельзя отменить. Когда ящик пересекает тюрьму, цвет мгновенно изменяется, чтобы сигнализировать пользователю о том, что функциональность изменилась.
Это реализовано с помощью Math.min()
и Math.max()
настройка позиции поля после dx
и dy
добавляется в текущую позицию:
var nowX, nowY, move = function (dx, dy) {
// move will be called with dx and dy
if (this.attr("y") > 60 || this.attr("x") > 60)
this.attr({x: this.ox + dx, y: this.oy + dy});
else {
nowX = Math.min(60, this.ox + dx);
nowY = Math.min(60, this.oy + dy);
nowX = Math.max(0, nowX);
nowY = Math.max(0, nowY);
this.attr({x: nowX, y: nowY });
if (this.attr("fill") != "#000") this.attr({fill: "#000"});
}
}
Вы также можете сделать так, чтобы ящик не мог быть поднят снова, как только он будет помещен в поле "тюрьма". Это можно сделать с помощью проверки позиции в функции move()
или start()
или использования c.undrag(f)
в функции stop()
.
Пример jsFiddle
window.onload = function() {
var nowX, nowY, R = Raphael("canvas", 500, 500),
c = R.rect(200, 200, 40, 40).attr({
fill: "hsb(.8, 1, 1)",
stroke: "none",
opacity: .5,
cursor: "move"
}),
j = R.rect(0,0,100,100),
// start, move, and up are the drag functions
start = function () {
// storing original coordinates
this.ox = this.attr("x");
this.oy = this.attr("y");
this.attr({opacity: 1});
if (this.attr("y") < 60 && this.attr("x") < 60)
this.attr({fill: "#000"});
},
move = function (dx, dy) {
// move will be called with dx and dy
if (this.attr("y") > 60 || this.attr("x") > 60)
this.attr({x: this.ox + dx, y: this.oy + dy});
else {
nowX = Math.min(60, this.ox + dx);
nowY = Math.min(60, this.oy + dy);
nowX = Math.max(0, nowX);
nowY = Math.max(0, nowY);
this.attr({x: nowX, y: nowY });
if (this.attr("fill") != "#000") this.attr({fill: "#000"});
}
},
up = function () {
// restoring state
this.attr({opacity: .5});
if (this.attr("y") < 60 && this.attr("x") < 60)
this.attr({fill: "#AEAEAE"});
};
// rstart and rmove are the resize functions;
c.drag(move, start, up);
};