本文介绍了使用Dojo工具包实现元素拖动效果的两种方法：静态创建与动态创建。静态创建通过在HTML标签中添加特定属性实现拖动功能；动态创建则是在页面加载后通过JavaScript代码将指定元素设置为可拖动。
在 Dojo中实现拖动的效果需要用Dojo 所提供的标签属性标注出希望实现拖动的实体。简单的说，就是如果希望一个实体可以拖动，则只需要在这个实体的标签里面加上 dojoType=“dojo.dnd.Moveable”这个属性。例如要实现一个表格的拖动，则只需要在这个表格的声明标签“<table>”里加上 dojoType=“dojo.dnd.Moveable”这个属性。甚至就是在“<tr>”或“<td>”标签中加上 dojoType=“dojo.dnd.Moveable”，也可以实现对应实体的拖动效果。下面就是一个Dojo的拖动例子，代码如下：
<html>
<head>
<script type="text/javascript"
djConfig="parseOnLoad: true, isDebug: true"
src="dojoapp/dojo/dojo.js"></script>
</head>
<body>
<script type="text/javascript">
dojo.require("dojo.dnd.move"); //引入Dojo的拖动功能模块
dojo.require("dojo.parser"); //引入解析Dojo标记的功能模块
</script>
<table dojoType="dojo.dnd.Moveable">
<tbody>
<tr>
<td>
Dojo 的拖动效果
</td>
</tr>
</tbody>
</table>
</body>
</html>
需要注意的是静态创建可拖动实体需要引入 dojo.require("dojo.parser") 。
8.4.2 动态实现可拖动实体
在上面程序中，通过在一些实体的标签里面加上相应的 Dojo 标签属性来实现可拖动实体的创建。这种静态实现可拖动实体的方法简单明了。但是在更多的情况下，往往需要根据一些实际情况运行得到的数据来动态的创建可拖动实体。在这种情况下，静态实现可拖动实体的方法就不能满足当下的需求。所以 Dojo 对于所有静态实现的方法都对应有一套相应的动态实现方法。下面就是一个动态实现可拖动实体的例子，代码如下：
<html>
<head>
<script type="text/javascript"
djConfig="parseOnLoad: true, isDebug: true"
src="dojoapp/dojo/dojo.js"></script>
</head>
<body>
<script type="text/javascript">
dojo.require("dojo.dnd.move"); //引入Dojo的拖动功能模块
var m1;
var init = function() {
m1 = new dojo.dnd.Moveable("tb1", {});//申明 id 为 "tb1" 的实体为可拖动实体
};
dojo.addOnLoad(init);// 表示在页面加载完成以后，执行 init 函数
</script>
<table id="tb1" border="1">
<tbody>
<tr>
<td>
Dojo 的拖动效果
</td>
</tr>
</tbody>
</table>
</body>
</html>
扫一扫
1709
08-08
08-08
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
