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); 
     });