用dojo.dnd实现拖放功能 - Dojo中文博客 - CSDN博客
- 格式：doc
- 大小：17.75 KB
- 文档页数：16
用dojo.dnd实现拖放功能 - Dojo中文博客 - CSDN博客
用dojo.dnd实现拖放功能
相信很多人都自己动手写过拖放。DHTML里做拖放的原理很简单，一般有这么三个阶段：mousedown 的时候做一些初始化， mousemove 的时候更新拖放对象的位置，
mouseup 的时候再做一些清理工作。讲起来简单，但做起来总要花一些功夫的。 Dojo 的 dnd 模块提供了通用且功能强大的拖放支持，让我们可以不用自己造轮子，而且用起来也很方便。
废话少说，先来看看它到底有多方便。假设页面上有两个ul ，我们需要对 ul 里的 li 元素实现拖放，让它们可以自由地在两个列表间移动。如果自己手写，虽然不难但也要花点时间吧。用 Dojo 的话，除了加载模块之外，甚至连一行
javascript 语句都不需要：
view plaincopy to clipboardprint?
01.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "/TR/html4/strict.dtd">
02.<html>
03. <head> 04. <meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1">
05. <title>Untitled Document</title>
06. <style type="text/css">
07. @import
"/ajax/libs/dojo/1.5/dojo/resources/dojo.css";
08. @import
"/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";
09.
10. ul{
11. border: 3px solid #ccc;
12. padding: 2em;
13. margin: 5em;
14. float: left;
15. cursor: default;
16. }
17. .dojoDndItemOver{
18. background: #ededed;
19. cursor: pointer;
20. } 21. .dojoDndItemSelected {
22. background: #ccf;
23. }
24. .dojoDndItemAnchor{
25. background: #ccf;
26. }
27. </style>
28. <script type="text/javascript"
src="/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
29. <script type="text/javascript">
30. dojo.require("dojo.dnd.Source");
31. </script>
32. </head>
33. <body class="claro">
34. <ul dojoType="dojo.dnd.Source">
35. <li class="dojoDndItem">Item
1</li>
36. <li class="dojoDndItem">Item
2</li>
37. <li class="dojoDndItem">Item
3</li> 38. <li class="dojoDndItem">Item
4</li>
39. <li class="dojoDndItem">Item
5</li>
40. </ul>
41. <ul dojoType="dojo.dnd.Source">
42. <li class="dojoDndItem">Item
A</li>
43. <li class="dojoDndItem">Item
B</li>
44. <li class="dojoDndItem">Item
C</li>
45. <li class="dojoDndItem">Item
D</li>
46. <li class="dojoDndItem">Item
E</li>
47. </ul>
48. </body>
49.</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "/TR/html4/strict.dtd">
<html> <head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
@import
"/ajax/libs/dojo/1.5/dojo/resources/dojo.css";
@import
"/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";
ul{
border: 3px solid #ccc;
padding: 2em;
margin: 5em;
float: left;
cursor: default;
}
.dojoDndItemOver{
background: #ededed;
cursor: pointer; }
.dojoDndItemSelected {
background: #ccf;
}
.dojoDndItemAnchor{
background: #ccf;
}
</style>
<script type="text/javascript"
src="/ajax/libs/dojo/1.5/dojo/dojo.xd.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.dnd.Source");
</script>
</head>
<body class="claro">
<ul dojoType="dojo.dnd.Source">
<li class="dojoDndItem">Item 1</li>
<li class="dojoDndItem">Item 2</li>
<li class="dojoDndItem">Item 3</li>
<li class="dojoDndItem">Item 4</li>
<li class="dojoDndItem">Item 5</li> </ul>
<ul dojoType="dojo.dnd.Source">
<li class="dojoDndItem">Item A</li>
<li class="dojoDndItem">Item B</li>
<li class="dojoDndItem">Item C</li>
<li class="dojoDndItem">Item D</li>
<li class="dojoDndItem">Item E</li>
</ul>
</body>
</html>
这个例子用了host在google的dojo1.5版本，可以直接运行。这里唯一需要写的javascript 语句就是加载
dojo.dnd.Source 类。剩下的就是在要拖放的对象上做一些标记，用html和 CSS class 就行了。而且 Dojo 为拖放对象添加的 CSS class 非常丰富，让我们能自由定制它们的外观。
Fig.1: Source内部DnD
Fig.2: Source之间DnD
