CODEWITHSUNDEEP
javascripthtmlsvgdrag-and-dropraphael
Harish Chandra Kharel
Harish Chandra Kharel

Reputation: 433

Drag and drop dom elements in raphael paper

I'm working in svg and using Raphael js to create dynamic objects inside the svg. Now I was wondering if I can drag and drop some predefined shapes from a html listing to the svg.

For details:

I have some predefined shapes that are stored in a database table which are listed in the side bar. Each shape has its own json string which i have done using the Raphaël.JSON (https://github.com/ElbertF/Raphael.JSON#rapha%C3%ABljson-and-rapha%C3%ABlfreetransform).

On the other side i have a raphael generated svg.

Now I want to drag each of the predefined shapes to the raphael svg/paper. (I have done the dragging which is very easy using jquery ui drag). After the drop of the list, I want to render the object getting the json string (which I have already done).

But the problem is that I'm not being able to find the exact point of drop over the raphael paper. I'm using panZoom too for zooming and panning. I want the consistency while the paper is zoomed out and in too.

Screen shot :

Screenshot of my work

The dragged object is an image not svg.

I'd appreciate your help and thanks in advance.

Upvotes: 1

Views: 817

Answers (1)

RashFlash
RashFlash

Reputation: 1002

couple of days later i provided a 'drag drop' functionality to a user, with simple javascript and svg. in which i gave a function which determine exact position of mouse pointer regardless of panning or zooming. have a look at it and see if its useful for you or not. (i don't know how it works in rapheal)

 var mainsvg = document.getElementsByTagName('svg')[0];
 function mouseup(event) {
        var svgXY = getSvgCordinates(event);// get current x,y w.r.t to your svg.
    }
        function getSvgCordinates(event) {
                    var m = mainsvg.getScreenCTM();
                    var p = mainsvg.createSVGPoint();
                    var x, y;

                    x = event.pageX;
                    y = event.pageY;

                    p.x = x;
                    p.y = y;
                    p = p.matrixTransform(m.inverse());

                    x = p.x;
                    y = p.y;

                    x = parseFloat(x.toFixed(3));
                    y = parseFloat(y.toFixed(3));

                    return {x: x, y: y};
                }

Upvotes: 2

Related Questions