JavaScript DHTML/Dojo toolkit/Drag Drop
Содержание
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>