开发学院软件开发 Java 掌握 Dojo 工具包，第 4 部分: Dojo 中的拖拽阅读

掌握 Dojo 工具包，第 4 部分: Dojo 中的拖拽

　2009-11-05 00:00:00　来源：WEB开发网　　　

核心提示： 清单 7<scripttype="text/javascript">dojo.require("dojo.dnd.move");dojo.require("dojo.parser");dojo.addOnLoad(funct

清单 7

　<script　type="text/javascript">　　dojo.require("dojo.dnd.move");　　dojo.require("dojo.parser");　　dojo.addOnLoad(　　function(){　　var　boy　=　new　dojo.dnd.Moveable("boy");　　dojo.connect(boy,　"onMoveStart",　function(mover){　　console.debug("Start　moving　boy",　mover);　　});　　dojo.connect(boy,　"onMoveStop",　function(mover){　　console.debug("Stop　moving　boy",　mover);　　});//　通过事件连接捕获了可拖动实体的事件。　"mover"　是与可拖动实体相关的对象，里面包含了相关的属性和方法　　});　　</script>　　　<body><p　id="boy">Haha,　I　am　boy</p></body>

在清单 7 中将可拖动实体“boy”和一个特定的输出函数连接了起来。这样在捕获可拖动实体“boy”的时候，不会“惊动”其它可拖放实体。

Dojo 的拖放

拖放是一个复杂而又充满魅力的功能。 Dojo 支持拖放功能的原因，就是因为 Dojo 的使用者在实际项目中开发高级拖拽操作功能的时候提出了这样的需求。

最简单的拖放实例

请读者将下面的代码在自己的机器上运行，并尝试感受拖放的实际效果。

清单 8

<html>　　<head>　　<title>test</title>　　<script　type="text/javascript"　src="dojo_path/dojo/dojo.js"　　djConfig="isDebug:true,　parseOnLoad:　true"></script>　　<style　type="text/css">　　@import　"dojo_path/dojo/resources/dnd.css";　　</style>　　<script　type="text/javascript">　　dojo.require("dojo.dnd.Source");　　dojo.require("dojo.parser");　　</script>　　</head>　　<body>　　<table><tbody><tr>　　<td>　　<div　dojoType="dojo.dnd.Source"　　style="border:　1px　solid　black;　height:　200px　width:　300px;">SOURCE　　<div　class="dojoDndItem"　style="height:50px;width:100%;background-color:blue">　　<div　class="bluesquare">BLUE</div>　　</div>　　<div　class="dojoDndItem"　style="height:50px;width:100%;background-color:red">　　<div　class="redsquare">RED</div>　　</div>　　</div>　　　　</td>　　<td>　　<div　dojoType="dojo.dnd.Target"　style="border:　1px　solid　black;　height:　200px;　　width:　300px;　">TARGET</div>　　　　</td>　　</tr></tbody></table>　　</body>　　</html>