Javascript 使用snapsvg拖动组

我想用snapsvg拖动一个组。 组只能在x轴上拖动。 因此，我构建了这个：

window.onload = function () {
    var were = function() {
        var that = this;
        this.wer = Snap("100%", 500);
        this.x = 0;
        this.y = 0;
        this.group = this.wer.g();

        this.construct = function() {
            for(var i = 1; i <= 100; i++) {
                that.one(i - 1, 0);
            }

            that.group.drag(
                function (dx, dy, x, y, e) {
                    this.attr({
                        x: Snap.snapTo(20, that.x + dx, 100000000),
                        y: 0
                    });
                },

                function (x, y, e) {
                    that.x = e.toElement.x.baseVal.value;
                    that.y = e.toElement.y.baseVal.value;
                }
            );
        };

        this.one = function(x, y) {
            this.width = 19;
            this.height = 60;

            that.group.add(that.wer.rect(x * (this.width + 1), y, this.width, this.height).attr({
                "fill": "#CCC"
            }));
        }
    }

    var test = new were();
    test.construct();
}

window.onload=函数（）{
var=function（）{
var=这个；
这.wer=Snap（“100%”，500）；
这个.x=0；
这个。y=0；
this.group=this.wer.g（）；
this.construct=函数（）{
对于（var i=1；i来说，问题是组是一个容器对象，没有x，y属性。它们本质上是它们元素的总和，通过变换移动它们

基本原理类似。您可以存储起始转换，并调整与之相关的转换。您可以对其进行设置，以使垂直转换不发生更改

使用提供的fiddle jStiller，您可以得到如下示例

这里我编辑了一个其他人的例子。这里你也可以这样，这段代码与单个元素一起工作。但是，当我将元素放入一个组并尝试应用相同的函数时，它就不再工作了。这段代码中有一个严重的错误，所以重新定义了拖动函数。
var s = Snap("#svg");

var block = s.rect(150, 0, 100, 100, 20, 20).attr({
  fill: "rgb(236, 240, 241)",
  stroke: "#1f2c39",
  strokeWidth: 3
});

var block2 = block.clone().transform('t0,100');
var group = s.g(block, block2);

group.drag(
  function (dx, dy, x, y, e) {  
    var tdx = +this.data('ot').split().dx + dx;

    var newTx = Snap.snapTo(50, tdx, 100000000)
    this.attr({
      transform: 't' + [newTx, 0]  
    });
  },
  function (x, y, e) {
     this.data('ot', this.transform().localMatrix);
});