javascript - 如何前后移动元素？

Question

演示:HERE

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

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

例如-> 假设我有 Rect, circle, rect2在我的论文中。我要搬家rect2到circle的位置反之亦然。我没有办法在 RaphaelJS. There are two methods, 中做到这一点element.prev and元素.next`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