Raphael .mouseup（）函数仅触发一次

Question

我正在尝试将可拖动的元素拖动到Rapheal中另一个元素的位置。 我遇到的问题是.mouseup()函数仅在其中执行一次功能。 再次拖动或移动该元素后，它将不再执行我在其中具有的定位功能。

我的最终目标是：

1. 拖动红色方块
2. 放开红色方块（鼠标移动）后，将方块对齐回到蓝色方块位置。

这是我尝试使用的代码，但似乎无法正常运行：

JSfiddle： http : //jsfiddle.net/4GWEU/3/

Javascript：

//Makes elements Draggable.
Raphael.st.draggable = function() {
    var me = this,
        lx = 0,
        ly = 0,
        ox = 0,
        oy = 0,
        moveFnc = function(dx, dy) {
            lx = dx + ox;
            ly = dy + oy;
            me.transform('t' + lx + ',' + ly);
        },
        startFnc = function() {
            //window.draggedElement = this;
        },
        endFnc = function() {
            ox = lx;
            oy = ly;
        };

    this.drag(moveFnc, startFnc, endFnc);
};

var container = document.getElementById('container');
var paper = Raphael(container, '539', '537');

var shape1 = paper.rect(50,50, 50,50);
shape1.attr({x: '50',y: '50',fill: 'red','stroke-width': '0','stroke-opacity': '1'});
shape1Set = paper.set(shape1);
shape1Set.draggable();

var shape2 = paper.rect(50,50, 50,50);
shape2.attr({x: '150',y: '50',fill: 'blue','stroke-width': '0','stroke-opacity': '1'});


shape1Set.mousedown(function(event) {
    console.log('mousedown');
});
shape1Set.mouseup(function(event) {
    console.log('mouseup'); 
    positionElementToElement(shape1, shape2);
});

$('#runPosition').click(function () {
   positionElementToElement(shape1, shape2); 
});

$('#runPosition2').click(function () {
   positionElementToElement2(shape1, shape2); 
});

function positionElementToElement(element, positionTargetElement)
{
    var parentBBox = positionTargetElement.getBBox();
        parent_x = parentBBox.x;
        parent_y = parentBBox.y;
        parent_width = parentBBox.width;
        parent_height = parentBBox.height;

    var elementBBox = element.getBBox();
        element_width = elementBBox.width;
        element_height = elementBBox.height;  

    var x_pos = parent_x + (parent_width / 2) - (element_width / 2) + 100;
    var y_pos = parent_y + (parent_height / 2) - (element_height / 2) + 100;

    console.log('Positioning element to: '+x_pos+' '+y_pos);
    element.animate({'x' : x_pos, 'y' : y_pos}, 100);
}

function positionElementToElement2(element, positionTargetElement)
{
    var parentBBox = positionTargetElement.getBBox();
        parent_x = parentBBox.x;
        parent_y = parentBBox.y;
        parent_width = parentBBox.width;
        parent_height = parentBBox.height;

    var elementBBox = element.getBBox();
        element_width = elementBBox.width;
        element_height = elementBBox.height;  

    var x_pos = parent_x + (parent_width / 2) - (element_width / 2);
    var y_pos = parent_y + (parent_height / 2) - (element_height / 2);

    console.log('Positioning element to: '+x_pos+' '+y_pos);
    element.animate({'x' : x_pos, 'y' : y_pos}, 100);
}

HTML：

<a href="#" id="runPosition">Run Position</a>
<a href="#" id="runPosition2">Run Position2</a>

<div id="container"></div>

笔记：

1. 我已经复制了positionElementToElement()函数，并使用偏移量设置了其中之一。 我已经将两个功能绑定到“ Run Position 1和Run Position 2链接。
2. 拖动项目后，单击“ Run Position 1链接不再将正方形设置回应该去的位置（即使该函数记录的x / y坐标与工作时相同）。

Answer 1

我已经知道如何正确地做到这一点。

您必须直接修改元素的x和y属性。

同样重要的是要注意，当使用element.attr('x');从元素中检索x和y属性时element.attr('x'); 或element.attr('y'); 它返回一个字符串值，而不是整数。 因此，您必须对这些返回值使用parseInt() ，以正确地将移动x和y值相加，以在元素移动时应用于元素。

当移动红色方块时，以下代码会将红色方块对齐到蓝色方块。

工作示例： http : //jsfiddle.net/naQQ2/2/

window.onload = function () {
    var R = Raphael(0, 0, "100%", "100%"),      
        shape1 = R.rect(50,50, 50,50);
        shape1.attr({x:'50',y:'50',fill: 'red','stroke-width': '0','stroke-opacity': '1'});

        shape2 = R.rect(50,50, 50,50);
        shape2.attr({x:'150',y:'50',fill: 'blue','stroke-width': '0','stroke-opacity': '1'});

    var start = function () {
        console.log(this);

        this.ox = parseInt(this.attr('x'));
        this.oy = parseInt(this.attr('y'));
        this.animate({opacity: .25}, 500, ">");
    },
        move = function (dx, dy) {     
            this.attr({x: this.ox + dx, y: this.oy + dy});
        },
        up = function () {
            //Snap to shape2 on mouseup.
            var snapx = parseInt(shape2.attr("x"));
                snapy = parseInt(shape2.attr("y"));

            this.animate({x: snapx, y: snapy}, 100);            
            this.animate({opacity: 1}, 500, ">");
        };
    R.set(shape1, shape2).drag(move, start, up);   
};