使用Raphael.js单击并拖动路径时克隆路径

时间:2013-03-24 23:01:40

标签: javascript jquery raphael

我有一条隐藏的道路。 当我点击div中的某个地方时,我想克隆它,并且当我点击并按住它时能够拖动它。

问题是,一旦我完成了在路径上拖动,释放鼠标按钮会导致另一条路径被创建

我正在使用Raphael.js和JQuery,这是我使用的代码:

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 () {});
    });
});

这是一个显示奇怪行为的JSfiddle。 http://jsfiddle.net/2gggp/3/

有什么想法吗?

1 个答案:

答案 0 :(得分:1)

$('#holder').click(function (e) {
   if ($(e.target).is("path")) 
     return false;
   ...
   ...
});