如何使用 DOJO 将文本翻译到相对位置？

Question

假设我们有一个 h1 文本，我们想用 DOJO 将它移动到一个新位置，用一个翻译动画.我们希望新的 h1 具有 相同的 y 坐标（距顶部的高度），但是向右移动了 200 像素。

fx.slideTo 应该做的工作：

var greetingNode = dom.byId("greeting");
var obj = domGeom.position(greetingNode, true);
fx.slideTo({
    node: greeting,
    top: obj.y, //pseudocode; obj[1]? obj.Y?
    left: obj.x + X //pseudocode; obj[0]? obj.X?
}).play();

我无法正确访问 obj。另外，如果我打印文本坐标，它们似乎是 x:8 和 y:21.43 周期性的。能请教一下吗？

ps：html.coords 可以完美工作，但已弃用，DOJO 文档建议改用 dojo.position。

完整代码在这里：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>

<!-- set Dojo configuration, load Dojo -->
<script>
    dojoConfig= {
        has: {
            "dojo-firebug": true,
            "dojo-debug-messages": true
        },
        async: true
    };
</script>

<!-- load Dojo -->
<script src="dojo/dojo.js"
        data-dojo-config="async: true"></script>            

<script>
    require([
        "dojo/dom-geometry",
        "dojo/dom",
        "dojo/dom-style",
        "dojo/fx",
        "dojo/dom-construct",
        "dojo/json",
        /*'dojo/_base/html',*/ //required for deprecated html.coords
        "dojo/domReady!"
    ], function (domGeom, dom, style, fx, domConstruct, JSON) {
        var greetingNode = dom.byId("greeting");
        domConstruct.place("<em> Dojo!</em>", greetingNode);
        greeting.innerHTML += " from Dojo!";

        /* coords module is deprecated! use position instead
        var coords = html.coords(greetingNode);*/

        var obj = domGeom.position(greetingNode, true);
        dom.byId("divcoordinates").innerHTML = JSON.stringify(obj);

        fx.slideTo({
            node: greeting,
            top: ? //works with coords.y
            left: ? //works with coords.x + 200
        }).play();
    });

</script>

</head>
<body>
    <h1 id="greeting">Hello</h1>
    <div id="divcoordinates">div coordinates:</div>
</body>
</html>

Answer 1

我看不出你所做的有任何问题。你得到的结果 x: 8 和 y :21.43 是浏览器设置的默认 margin 。尝试将其重置为 0px 并解决您的问题。

HTML default body margin

此外，如果您不想更改高度，请不要更新 fx.slideTo 中的 top 值。

以下是更新后的示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>
  <style>
    body, h1{
      margin:0px
    }
  </style>
<!-- set Dojo configuration, load Dojo -->
<script>
    dojoConfig= {
        has: {
            "dojo-firebug": true,
            "dojo-debug-messages": true
        },
        async: true
    };
</script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js"></script>

<!-- load Dojo 
<script src="dojo/dojo.js"
        data-dojo-config="async: true"></script>       -->     

<script>
    require([
        "dojo/dom-geometry",
        "dojo/dom",
        "dojo/dom-style",
        "dojo/fx",
        "dojo/dom-construct",
        "dojo/json",
        /*'dojo/_base/html',*/ //required for deprecated html.coords
        "dojo/domReady!"
    ], function (domGeom, dom, style, fx, domConstruct, JSON) {
        var greetingNode = dom.byId("greeting");
        domConstruct.place("<em> Dojo!</em>", greetingNode);
        greetingNode.innerHTML += " from Dojo!";

        /* coords module is deprecated! use position instead
        var coords = html.coords(greetingNode);*/
        var obj = domGeom.position(greetingNode, true);
        dom.byId("divcoordinates").innerHTML = JSON.stringify(obj);
      
        fx.slideTo({
            node: greetingNode,
            //top: obj.y, //works with coords.y
            left: obj.x + 200 //works with coords.x + 200
        }).play();
      
    });

</script>

</head>
<body>
    <h1 id="greeting">Hello</h1>
    <div id="divcoordinates">div coordinates:</div> 
</body>
</html>

如何使用 DOJO 将文本翻译到相对位置？

How to translate text to relative position with DOJO?

javascript

dojo