how to limit the draggable area in snap.svg?

[kevinG73]

I am working on a puzzle game and I use snap.svg and javascript to move the elements of the game . But the problem is that any user can drag the element of svg anywhere on the screen, including out of the droppable area. I want to prevent it , I found some resources on internet about snap.svg but it doesn't like i want

I share the code here : https://jsfiddle.net/j058aoyn/2/

my script :

       var s = Snap("#mysvg");
        var dragging = false;
        var tmp = null

        Snap.load("puzzle.svg", onSVGLoaded)

        function onSVGLoaded(frag) {
            s.append(frag);
            s.mouseover(clickDrag)
        }

        function clickDrag(e) {
            tmp = e.target.parentNode.getAttribute('index');
            if (tmp != null) {
                var t = Snap(e.target);
                t.drag();
            }
            if (t !== undefined && (t.data('dragEl') === undefined) && (dragging === false)) {
                t.drag(dragMove, dragStart, dragStop).data('dragEl', t);
            }
        }

        function dragStart(x, y, e) {
            this.data('targetPiece', e.target);
        }

        function dragMove(dx, dy, x, y, e) {
            if (tmp !== this.data('targetPiece')) {
                return
            }
            // Check the event isn't coming from a different state
            this.data('dragEl').attr({cx: x - 10, cy: y - 10})
            dragging = true;
        }

        function dragStop() {
        }

[ibrierley]

If you look here, I did a plugin for it... http://svg.dabbles.info/snaptut-drag-limittransform

[kevinG73]

@ibrierley i tried to use this plugin but it doesn't work with my projet , the code I posted here is just a quick snapshot . I don't know if there are other method without use viewbox

[ibrierley]

Can you clarify "doesnt work", do you get an error or something ? Can you post a jsfiddle ?

[kevinG73]

https://jsfiddle.net/f3gjw576/3/

@ibrierley i don't know why i can't move any where in the area of the viewbox , can you chekout ?

[ibrierley]

I suspect it's because there's a bit more complexity with nested transforms and things like that....it should be possible, but I've not got any time for a day or two...however, if you look at

http://svg.dabbles.info/snaptut-loadselect this has a bit more complex calculations going on (so it takes care of transformed drags...the original code you have in the fiddle drags at a different rate to the mouse movement). If you paste https://gist.githubusercontent.com/kevinG73/5b085dd74cec4e1a2fdfd93893373d9e/raw/6f994b7ebea13798a58d64222d7b9cfc634c93c2/puzzle.svg over where it says "Bird.svg" near the bottom of the code (you can edit that page live). You will see you can click and drag there and it looks ok....

So I think it's a case of combining that code or similar, and then adding similar collision detection like the other example. I may get a bit more time at the weekend or next week if still stuck.

It "should" be possible though, but it is a bit fiddly and complex.

Ian

On Thu, Jun 10, 2021 at 4:57 PM Kevin G. @.***> wrote:

https://jsfiddle.net/f3gjw576/3/

@ibrierley https://github.com/ibrierley i don't know why i can't move any where in the area of the viewbox , can you chekout ?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/adobe-webplatform/Snap.svg/issues/650#issuecomment-858743686, or unsubscribe https://github.com/notifications/unsubscribe-auth/AA5YN5LTL2VY6HNF3I4SLI3TSDOGFANCNFSM46OSP4YA .

[kevinG73]

I do not understand what you mean ? I can always drag and drop even on the code I sent you , it's just how to limit the drag and drop that i look for

[ibrierley]

The drag and drop on the original doesn't work correctly. If you drag it 100px, it only moves 50px (roughly).

[ibrierley]

Btw you can probably hack/fix it like the example, but you may find you have later issues with different setups, not sure. If you don't mind that, then you just need to add basic collision detection in your move handler.

[kevinG73]

I worked on it , but i have still the same issue https://jsfiddle.net/ncL94f5v/3/

[ibrierley]

Sorry, I haven't had chance to look at this, and may not for a while currently. The transform stuff I did back in those days may be overcomplicated stuff, I'm really not sure without a bit of time to sit down and check if it really should work for this case actually...I note this old (potentially buggier if nested transforms are used) but simpler plugin version feels better possibly... http://svg.dabbles.info/snaptut-drag-limit it feels like it just needs bounding check offset minus the starting position or something.

Sorry I haven't had any real time to check, I like this stuff, it's possible I may get a bit more time in the future, but I can't guarantee anything atm.

[kevinG73]

thank you , it works now , problem solved . @ibrierley