Блог

У меня есть следующий код для перетаскивания фигур в Raphael:

 var start = function() {
        this.ox = 0;
        this.oy = 0;
        self.bringToFront();
    },
    move = function(dx, dy) {
        var a = self.getAngle(self.rotation),
            bb = self.shape.getBBox();

        switch(a){
            case 90:
                self.shape.translate(dy - this.ox, this.oy - dx);
                this.ox = dy;
                this.oy = dx;
                break;
            case 180:
                self.shape.translate(this.ox - dx, this.oy - dy);
                this.ox = dx;
                this.oy = dy;
                break;
            case 270:
                self.shape.translate(this.ox - dy, dx - this.oy);
                this.ox = dy;
                this.oy = dx;
                break;
            default:
                self.shape.translate(dx - this.ox, dy - this.oy);
                this.ox = dx;
                this.oy = dy;
        }
    },
    end = function() {
    };
  

( self.shape это набор путей и прямоугольников Raphael)

Я пытаюсь сделать так, чтобы вы не могли перетаскивать фигуры из области холста SVG.Прямо сейчас я могу получить координаты ограничивающей рамки формы, bb переменной в move функции. Я пытался добавить проверку if(bb.x < 10)... , но я не знаю, как установить ограничение, чтобы сказать: «Не позволяйте ему двигаться дальше влево». Проблема в том, что я проверяю положение x ограничивающей рамки, но затем пытаюсь ограничить x положение фигуры?

Это не ответ как таковой, но он должен указать вам правильное направление.

ознакомьтесь со ссылкой на raphael 2.0 для перетаскивания

Изображение рядом с ним делает в значительной степени именно то, что вам нужно. Код, стоящий за этим, находится в reference.js досье. Если вы выполните поиск «Element.drag-extra», вы увидите этот фрагмент кода

 (function (r) {
    var x, y;
    r.circle(15, 15, 10).attr(fill).drag(function (dx, dy) {
        this.attr({
            cx: Math.min(Math.max(x   dx, 15), 85),
            cy: Math.min(Math.max(y   dy, 15), 85)
        });
    }, function () {
        x = this.attr("cx");
        y = this.attr("cy");
    });

})(prepare("Element.drag-extra"));
  

Здесь Дмитрий ограничивает перетаскивание между минимальным значением 15 и максимальным значением 85 пикселей. Должна быть возможность использовать небольшую магию DOM, чтобы определить размер холста и соответствующим образом изменить приведенный выше код.

Надеюсь, это немного поможет.