如何前后移动元素

How to move element front and back?

本文关键字：元素 移动 何前      更新时间：2023-09-26

DEMO：HERE

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

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

例如>假设我的论文中有Rect, circle, rect2。我想rect2移动到circle的位置，反之亦然。我没有办法在 element.prev and element.nex't RaphaelJS. There are two methods,做到这一点。我尝试使用它们，但无法理解如何使用它们。
法典：

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

你可以尝试Raphaels insertBefore和insertAfter 来到达正确的位置。

element.insertAfter（ otherEl ）;

.doc

相关文章：