Raphaeljs перетащить - PullRequest
Новая
       5

Raphaeljs перетащить

20 голосов
/ 09 сентября 2010

Я использую rapaeljs для своего веб-приложения.Я хочу установить границы объекта.Объект может двигаться в выпадающей области.Как только объект попадает в выпадающую область, для него не должно быть выхода.

1 Ответ

63 голосов
/ 08 октября 2010

Рафаэль имеет встроенную поддержку перетаскивания через .drag(). Используйте его в форме element.drag(start, move, up);, где 3 аргумента - это 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);
};​
...