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

Question

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

喜欢这个：JSFiddle

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

Answer 1

我发现了一个例子这种使用拉斐尔JS，我将它转换与捕捉工作。这是一个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); 
     });