Question

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

像这样：JSFiddle

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

Answer 1

我找到了一个使用Raphael JS的示例，我将其转换为使用Snap。这是一个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);
        });

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

1 个答案: