JavaScript Tutorial/Dojo toolkit/subscribe

Материал из Web эксперт
Перейти к: навигация, поиск

subscribe function

<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
        dojo.require("dojo.fx");
        dojo.require("dojo.dnd.move");
        dojo.addOnLoad(function(  ){
          var move = new dojo.dnd.Moveable(dojo.byId("my"));
          var coords;
          dojo.subscribe("/dnd/move/start",function(e){
            coords = dojo.coords(e.node);
          });
          dojo.subscribe("/dnd/move/stop",function(e){
            dojo.fx.slideTo({
              node: e.node,
              top: coords.t,
              left: coords.l,
              duration:2000
            }).play(  );
          });
       });
    </script>
  </head>
  <body class="tundra">
       <p style="position : absolute; left : 300px; top : 300px;"
                  id="my"
               >Drag and drop me somewhere else</p>
</body>
</html>


subscribe to start

<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
      
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
        dojo.require("dojo.fx");
        dojo.require("dojo.dnd.move");
        dojo.addOnLoad(function(  ){
          var move = new dojo.dnd.Moveable(dojo.byId("my"));
          var coords;
          dojo.subscribe("/dnd/move/start",function(e){
            coords = dojo.coords(e.node);
          });
          dojo.subscribe("/dnd/move/stop",function(e){
            dojo.fx.slideTo({
              node: e.node,
              top: coords.t,
              left: coords.l,
              duration:2000
            }).play(  );
          });
       });
    </script>
  </head>
  <body class="tundra">
       <p style="position : absolute; left : 300px; top : 300px;"
                  id="my"
               >Drag and drop me somewhere else</p>
</body>
</html>