Select Snap.svg-拖动以选择多个项目

我只是想知道是否已经构建了一个开源的Snap.svg类来拖动和选择多个元素？寻找类似jQuery的拖动选择

像这样：

---

我找到了一个使用Raphael JS的例子，并将其转换为使用Snap。这是一支密码笔

$（文档）.ready（函数（）{
var s=Snap（“#svg”）；
//在背景中创建一个要附加拖动事件的对象
var mat=s.rect（0,0300300）.attr（“fill”，#ffffff”）；
var圆=s圆（75,75,50）；
var rect=s.rect（150,150,50,50）；
变量集=s.g（圆，矩形）；
set.attr({
填充：“红色”，
行程：0
});
var盒；
//将接收所选项目的集合
变量选择=s.组（）；
//拖动函数
//当鼠标移到背景上时，开始绘制选择框
函数dragstart（x、y、事件）{
box=s.rect（x，y，0，0）.attr（“笔划”，“#9999FF”）；
}
//当鼠标在拖动过程中移动时，调整长方体。如果向左或向上移动原点，则必须平移整个长方体并反转dx或dy值，因为.rect（）的宽度或高度不为负值
函数拖动（dx、dy、x、y、事件）{
var xoffset=0，
yoffset=0；
if（dx<0）{
xoffset=dx；
dx=-1*dx；
}
if（dy<0）{
yoffset=dy；
dy=-1*dy；
}
变换（“T”+xoffset+”，“+yoffset”）；
框。属性（“宽度”，dx）；
框。属性（“高度”，dy）；
框。属性（“填充”、“无”）；
}
函数dragend（事件）{
//获取选择的边界
var bounds=box.getBBox（）；
box.remove（）；
重置（）；
var items=set.selectAll（“*”）；
项目。forEach（功能（el）{
//这里，我们想要得到每个对象的x，y值，不管它是什么形状，但是rect使用rx和ry，circle使用cx和cy，等等
//我们来看看边界框是否会截取
var mybounds=el.getBBox（）；
//边界框重叠吗？
//该对象的某个x极端是否在选择的x极端之间？
if（Snap.path.isbboxiterSect（mybounds，bounds））{
选择。附加（el）；
}
});
选择。属性（“不透明度”，0.5）；
}
功能重置（）{
//空选择和重置不透明度；
变量项=选择项。选择全部（“*”）；
项目。forEach（功能（el）{
追加（el）；
});
}
物料拖动（拖动、拖动启动、拖动）；
});

$(".itemlist").selectable({filter:"li"});

            $(document).ready(function() {
            var s = Snap("#svg");

            //make an object in the background on which to attach drag events
            var mat = s.rect(0, 0, 300, 300).attr("fill", "#ffffff");

            var circle = s.circle(75, 75, 50);
            var rect = s.rect(150, 150, 50, 50);
            var set = s.g(circle, rect);

            set.attr({
                fill: 'red',
                stroke: 0
            });

            var box;

            //set that will receive the selected items
            var selections = s.group();

            //DRAG FUNCTIONS
            //when mouse goes down over background, start drawing selection box
            function dragstart (x, y, event) {
                box = s.rect(x, y, 0, 0).attr("stroke", "#9999FF");    
            }

            //when mouse moves during drag, adjust box. If to left or above original point, you have to translate the whole box and invert the dx or dy values since .rect() doesn't take negative width or height
            function dragmove (dx, dy, x, y, event) {
                var xoffset = 0,
                    yoffset = 0;

                if (dx < 0) {
                    xoffset = dx;
                    dx = -1 * dx;
                }

                if (dy < 0) {
                    yoffset = dy;
                    dy = -1 * dy;
                }

                box.transform("T" + xoffset + "," + yoffset);
                box.attr("width", dx);    
                box.attr("height", dy);  
                box.attr("fill", "none");  
            }


            function dragend (event) {
                //get the bounds of the selections
                var bounds = box.getBBox();
                box.remove();
                reset();

                var items = set.selectAll("*");
                items.forEach(function(el) {
                    //here, we want to get the x,y vales of each object regardless of what sort of shape it is, but rect uses rx and ry, circle uses cx and cy, etc
                    //so we'll see if the bounding boxes intercept instead
                    var mybounds = el.getBBox();

                    //do bounding boxes overlap?
                    //is one of this object's x extremes between the selection's xextremes?
                    if (Snap.path.isBBoxIntersect(mybounds, bounds)) {
                        selections.append(el);
                    }
                });

                selections.attr("opacity", 0.5);
            }


            function reset () {
                //empty selections and reset opacity;
                var items = selections.selectAll("*");
                items.forEach(function(el) {
                    set.append(el);
                });
            }

            mat.drag(dragmove, dragstart, dragend);
        });