如何前后移动元素？

Question

演示：HERE

我在我的应用程序中使用 raphael js。这里我需要在纸上重新安排元素顺序。我想一次向后或向前移动一个位置。我尝试使用 toFront() 和 toBak()，但它移动到纸张的末尾或顶部。我只想移动 1 个位置。

更新： 我正在尝试找到重叠元素的解决方案。我的意思是假设我在纸上添加 2 个元素并将 1 个元素拖到另一个元素上。有没有办法找到第二个元素在元素 1 之上。

例如-> 假设我的论文中有 Rect, circle, rect2。我想将 rect2 移动到 circle 的位置，反之亦然。我无法在 RaphaelJS. There are two methods,element.prevandelement.nex`t 中执行此操作。我尝试使用它们，但无法理解如何使用它们。
代码：

<b>Click on rectangle</b>
                <div  id="editor"></div>
<button type = "button" onclick="moveBack()" >Back

JS:

var paper = Raphael("editor", 635,500),
        canvas= document.getElementById('editor').style.backgroundColor='gray';
r1 = paper.rect(80,40,250,80,5)
r2 = paper.rect(180,80,290,80,5)
r3 = paper.rect(120,140,200,80,5)

r1.attr({
         fill:'red',
    });
r2.attr({
         fill:'blue',
    });
r3.attr({
         fill:'green',
    });
ft= paper.freeTransform(r1,{draw:['bbox'],
            rotate: true,keepRatio:[ 'axisX', 'axisY', 'bboxCorners', 'bboxSides'],
            scale:[ 'axisX', 'axisY', 'bboxCorners', 'bboxSides' ]});
ft= paper.freeTransform(r2,{draw:['bbox'],
            rotate: true,keepRatio:[ 'axisX', 'axisY', 'bboxCorners', 'bboxSides'],
            scale:[ 'axisX', 'axisY', 'bboxCorners', 'bboxSides' ]});
ft= paper.freeTransform(r3,{draw:['bbox'],
            rotate: true,keepRatio:[ 'axisX', 'axisY', 'bboxCorners', 'bboxSides'],
            scale:[ 'axisX', 'axisY', 'bboxCorners', 'bboxSides' ]});

 var moveBack = function () {
r2.toBack();
}

Answer 1

您可以尝试使用 Raphaels insertBefore 和 insertAfter 来获得正确的位置。

element.insertAfter( otherEl );

doc

如何前后移动元素？

How to move element front and back?

javascript

raphael