DOJO로 상대 위치로 텍스트를 변환하는 방법은 무엇입니까?

h1 텍스트가 있고 을 DOJO로 새 위치으로 옮기고 번역 애니메이션으로 이동한다고 가정 해 봅시다. 새로운 h1이 같은 y 좌표 (상단으로부터의 높이) 인 이 되길 원하지만 은 오른쪽으로 200 픽셀 이동했습니다.DOJO로 상대 위치로 텍스트를 변환하는 방법은 무엇입니까?

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>  <script> dojoConfig= { has: { "dojo-firebug": true, "dojo-debug-messages": true }, async: true }; </script>  <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>

출처

2017-01-23 bransharp

. 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>

출처

2017-01-23 15:52:52

는 사실, 제로에서 몸과 H1 마진와 함께 작동 :

다음은 업데이트 된 샘플입니다. 그러나 여백이없는 요소를 0으로 변환하려면 어떻게해야합니까? 여백 0이 없으면 "alert (JSON.stringify (obj));"를 추가하십시오. "var obj"선언 직후. h1 텍스트는 처음에는 한 위치에 있고 그 다음에는 변환 효과를 시작하기 전에 다른 위치로 점프합니다. 왜 그런가요? 상단 여백이있는 요소를 50px로 변환하고 0으로 설정할 수 없다고 가정 해 봅시다. 도와 줘서 고마워. – bransharp

앞서 언급했듯이 마진을 설정하지 않으면 브라우저에서 정의한 기본 여백을 갖게됩니다. 당신이 그것을 통제한다면 그것은 좋을 것입니다. 두 번째로,'position'은'relative'에서'absolute'로 바뀌므로 점프하게됩니다. 그래서 당신이 그것을'절대적 '으로 설정하고 있는지, 그리고 당신이 원하는 곳이되도록해야합니다. –

slideTo 메소드의 이름은 * slideBy * 여야합니다. 기술적으로 "slide to"는 x, y 좌표가있는 새 포인트를 지정해야한다는 것을 의미하기 때문에 top : obj.y를 설정하는 이유입니다. 그러나 그렇게하면 항목이 수직으로 변환됩니다. 어쨌든, 당신이 말했듯이, ** 설정 마진 : 0' ** 작품 **하지만, 나는 단지 위치에 간섭하지 않고 ** 작업을 수행 할뿐만 아니라,'h1'에'position : relative'를주는 것이 발견되었습니다. 다른 HTML DOM 요소 중 **. 감사! – bransharp

DOJO로 상대 위치로 텍스트를 변환하는 방법은 무엇입니까?

답변

관련 문제