JavaScript DHTML/Dojo toolkit/Drag Drop

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

Create a movable tag through code

   <source lang="html4strict">

<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.dnd.Moveable");
       dojo.require("dojo.parser");
   dojo.addOnLoad(function(  ) {
       var e = document.createElement("div");
       e.innerHTML="asdf";
       dojo.addClass(e, "moveable");
       dojo.body(  ).appendChild(e);
       var m = new dojo.dnd.Moveable(e);
     });
   </script>
 </head>
 <body class="tundra">
  

</body> </html>

 </source>
   
  


dojo drag and drop reorder

   <source lang="html4strict">

<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.dnd.source");
       dojo.require("dojo.parser");   
   </script>
 </head>
 <body class="tundra">
1
2
<img src="1.jpg" />
 </body>

</html>

 </source>
   
  


Drop to target

   <source lang="html4strict">

<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.dnd.Source");
           dojo.require("dojo.parser");
   </script>
 </head>
 <body class="tundra">
foo
bar
baz
quux
Drop here

</body> </html>

 </source>
   
  


Make any tag moveable

   <source lang="html4strict">

<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.dnd.Moveable");
       dojo.require("dojo.parser");
   </script>
 </head>
 <body class="tundra">
asdf

</body> </html>

 </source>
   
  


Make text field moveable

   <source lang="html4strict">

<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.dnd.Moveable");

           dojo.require("dojo.parser");
   </script>
 </head>
 <body class="tundra">
           <textarea class="note">Type some text here</textarea>

</body> </html>

 </source>
   
  


Reorder DIV tag

   <source lang="html4strict">

<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.dnd.Source");
           dojo.require("dojo.parser");
   </script>
 </head>
 <body class="tundra">
foo
bar
baz
quux

</body> </html>

 </source>