Question

我试图让一个可拖动的元素在拖动后快速回到Rapheal中另一个元素的位置。我遇到的问题是.mouseup()函数只执行一次其中的函数。再次拖动或移动元素后，它将不再执行我在其中的定位功能。

我的最终目标是：

拖动红色方块
当红色方块松开时（鼠标按下），将方形按回到蓝色方块位置。

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

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>

备注：

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

Answer 1

我已经弄清楚如何正确地做到这一点。

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

同样重要的是要注意，当使用element.attr('x');或element.attr('y');从元素检索x和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);   
};

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

1 个答案: