5

Here (SVG draggable using JQuery and Jquery-svg, accepted answer) is implementation of drag-and-drop functionality to move circle. It is based on changing cx and cy attributes of moveable circle object.

How can I drag-and-drop a polygon?

How can I use any other element that doesn't have cx,cy coordinates?

Should I recalculate all object points?

I hope there is an easier way. I plan to use JavaScript+jQuery

Parker
  • 7,244
  • 12
  • 70
  • 92
Budda
  • 18,015
  • 33
  • 124
  • 206

1 Answers1

4

There is an easy way to do so without recalculatingpoints. You just have to translate the shape using the property transform. Let's say you just have any shape in your svg (in the case that I want to show you, I'm gonna use a shape element), and that you are able to move that shape only when the event mousedown, then mousemove is triggered, and that this action is ended when the mouse button is released. Then the procedure is as follows using jQuery and svg tags as selectors:

$("svg").mousedown(function(e){
    /* Getting initial coordinates of pointer */
    var GetInitCoordx = e.clientX;
    var GetInitCoordy = e.clientY;

    /* When mouse is moved while down, then applies the transformation. */
    $(this).bind("mousemove.customName", function(e){
        $("svg").find("path").attr("transform", "translate("+String(e.clientX-GetInitCoordx)+","+String(e.clientY-GetInitCoordy)+")");
    });

    /* When mouse button is released, move event is unbind */
    $(this).mouseup(function(e){
        $(this).unbind("mousemove.customName");
    );}
});

The basic idea is that. I've already designed an app using such approach, and it worked fine for me in Chrome, IE9 and Opera. Anyway, you are free to warm me if I made a mistake in the code, but what I wanted you to get is that the approach that I've used is very easy to implement.

Also, remember that you can set unique property values to your svg elements, so you can identify while selecting using the jQuery selectors.

Jesufer Vn
  • 13,200
  • 6
  • 20
  • 26
  • Thanks. Could you please explain also why do you need 'customName' as a part of event parameter of 'bind' method? – Budda May 29 '11 at 23:17
  • I am using the event mousemove as a namespace. So, I am able to unbind not all the mousemove events that I have been set, but only the one that I just set, in this case, the one related to the shape move. – Jesufer Vn May 29 '11 at 23:39
  • I like this one. Does it also work find with explorer canvas? – makeitmorehuman May 30 '11 at 17:50
  • Well, I haven't try to do so. – Jesufer Vn May 31 '11 at 03:14
  • Yes it works. But with 10000 objects it became slide show (on my machine)... (actually, in any browser). – Budda May 31 '11 at 04:30
  • 1
    Well, if you want to move them all simultaneously, you can append those 10000 objects to a "g" parent. Then, you apply the transform to that element. Anyway, accessing the DOM intensively can make any browser a slide show. – Jesufer Vn May 31 '11 at 04:42