Question

我希望在SVG中设置两个矩形的边界。

我找到了这个例子：http://bl.ocks.org/mbostock/1557377

在示例中，边界从拖动对象的位置得出。示例中的每个圆圈只能从它开始的位置移动一定距离。我想要做的是创建一个拖动功能并在多个形状上使用它。此拖动功能将阻止形状离开某个区域。

例如：我在屏幕左侧有一个矩形，右边有一个矩形，但我不希望它们中的任何一个能够离开屏幕。我开始研究这个问题，但想到这个问题对于拖动物体的位置有用。因此，这适用于左手矩形，但右手矩形可以向右移动，但只能向左移动

    .on("drag", function(d) {    
            g = this;
            translate = d3.transform(g.getAttribute("transform")).translate;
            x = d3.event.dx + translate[0],
            y = d3.event.dy + translate[1];

            if(x<-10){x=-10}
            if(x>width-10){width-10}
            if(y<-10){y=-10}
            if(y>height-10){y=height-10}

            d3.select(g).attr("transform", "translate(" + x + "," + y + ")");
            d3.event.sourceEvent.stopPropagation();

我的问题是：如何对拖动的任何东西施加相同的边界？即我不希望它离开屏幕。我有变量宽度和高度分别是屏幕宽度和屏幕高度

如何为多个可拖动对象提供相同的边界？

0 个答案: