Snap.svg - Drag to select multiple items - select

Question

I was just wondering if there is an existing open source Snap.svg class already built to drag and select multiple elements? Looking for something like the jQuery drag select.
Like this: JSFiddle
$(".itemlist").selectable({filter:"li"});

Answer 1

I found an example for this using Raphael JS and I converted it to work with Snap. Here is a codepen.
http://codepen.io/fractorr/pen/vOzaOx/
$(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);
});