Enable drag on subset of elements about snap.svg.zpd HOT 6 CLOSED

Okay. One final item to add, so that when zoomed, and element was scaled dragging worked 100% correctly I changed altDrag to:

Snap.plugin( function( Snap, Element, Paper, global ) {
        Element.prototype.altDrag = function() {
        this.drag( dragMove, dragStart, dragEnd );
        return this;
        }

        var dragStart = function ( x,y,ev ) {
            this.data('origTransform', this.transform().local );
        }

        var dragMove = function(dx, dy, ev, x, y) {
        var zoomPan = this.paper.zpd('save');
        this.attr({
                    transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx / zoomPan.a, dy / zoomPan.a]
         });
        }

        var dragEnd = function() {
        }


    });

from snap.svg.zpd.

Hi @greglbd,

unfortunately the library is not yet set-up to handle subsets separately. Maybe this is something that we could implement in the future.

Maybe you could explore the option to stack two svg elements (with absolute positioning inside a container) and use zpd-plugin on the upper element only. Another option would be to set the background as background-image on the svg-element.

<div class="container" style="width:400px; height:400px; position:relative">
  <svg id="background" style="position:absolute; top:0px; bottom:0px; left:0px; right:0px"></svg>
  <svg id="stage" style="position:absolute; top:0px; bottom:0px; left:0px; right:0px"></svg>
</div>

from snap.svg.zpd.

Seems your background image should be another svg elements. (same as @tikiatua said)

snap.svg.zpd currently doesn't support disable drag on specific element now.

Thanks for your question.

from snap.svg.zpd.

Thanks for the response @tikiatua @huei90 I'm working on extending the plugin.

I've got this feature pretty much working so i'll make a pull request when i'm done and you can decide what to do with it.

Thanks

Greg

from snap.svg.zpd.

yeah @greglbd Thanks!

Look forward to your PR!

🍻

from snap.svg.zpd.

I have found another way to achieve this functionality without modifying zpd in anyway using a slightly modified version of snaps own drag functionality. Additionally this works with groups etc out of the box which is important for dragging complex icons etc. which could be made up of many shapes and paths.

First prevent clicking on elements from triggering zpd drag events:

eve.on("snap.drag.start", function(x, y, e) {
        e.stopPropagation();
});

Then add this custom drag plugin which deals with dragging when zoomed etc (props to @ibrierley):
https://github.com/ibrierley/SnapTut/blob/master/dragplugin.js

For each element or group you want to be draggable:

e.altDrag();

Overall I feel this is a better solution than modifying zpd to be all things to all people. It should be a modular plugin for zooming and panning which it's awesome at and other plugins added for additional functionality such as dragging elements etc.

from snap.svg.zpd.