0

I have a hidden path. I would like to clone it when I click somewhere in a div, and be able to drag it when I click and hold on it.

The problem is, once I'm done dragging around the path, releasing the mouse button results in another path being created.

I'm using both Raphael.js and JQuery, and here's the code I use:

var c = Raphael("holder", 640, 480);
var p = c.path("M150 0 L75 200 L225 200 Z").hide().attr("fill", "#c0c0c0");
function getCenter (bbox) {
    return [Math.floor(bbox.x + bbox.width/2.0), Math.floor(bbox.y + bbox.height/2.0)];
};

$(document).ready(function (e) {
    $('#holder').click(function (e) {
        var posX = $(this).position().left, posY = $(this).position().top;
        var [x,y] = getCenter(p.getBBox());
        p.clone()
            .transform("T"+[(e.pageX-posX-x),(e.pageY-posY-y)])
            .drag(
        function (dx, dy) {     
            this.transform("t"+(e.pageX-posX-x+dx)+","+(e.pageY-posY-y+dy));
        },
        function () {},
        function () {});
    });
});

Here's a JSfiddle that shows the weird behaviour. http://jsfiddle.net/2gggp/3/

Any idea?

4

1 に答える 1

1 
$('#holder').click(function (e) {
   if ($(e.target).is("path")) 
     return false;
   ...
   ...
});
于 2013-03-25T12:28:14.590 に答える