Dojo的Dnd事件处理 - hwoarangzk的博客

作者在 2008-05-29 12:08:35 发布以下内容

现在讲下Dojo的事件处理。关键是几个回调函数的使用。有3个回调函数是非常有用的。下面的一些介绍来自官方网站。

dojo.subscribe("/dnd/drop", function(source,nodes,iscopy){
    //code to perform some action
});
dojo.subscribe("/dnd/start", function(source,nodes,iscopy){
    //code to perform some action
});
dojo.subscribe("/dnd/cancel", function(){
    //code to perform some action
});
第一个回调函数是在释放元素时触发的，第二个则是在刚开始拖动的时候触发，第三个嘛，看名字就知道是在取消拖动事件时触发的了。
然后是这些函数中的参数：
source：被拖动元素的来源节点。
nodes：HTML节点对象数组。最关键的应用是获得被拖动的元素。代码如下：
var jsnode = source.getItem(nodes[0].id);
var d = jsnode.data;
var t = jsnode.type;
iscopy：布尔值。true是复制元素，而false是拖动元素。
另外，如果想得到拖动元素的目标对象，则可通过以下代码获得：
var t = dojo.dnd.manager().target;
还有就是“jsId”这个属性的应用。与id属性不同，该属性建立起了一个变量，可以像js的一般变量那样使用。
例如：
<div id="a" jsId="cart"></div>
就想当于建立了一个名字为"cart"的变量。可以使用if(t == cart)这种语句来操作该变量。后面的例子中会有应用。
下面就是一个简单的购物车例子，商品资料请参照《魔兽争霸3冰封王座1.20版本》^_^:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>The War3 Shopping Application</title>

.shop{border:2px solid black; width:300px; height:300px}

.hero{border:2px solid red; width:300px; height:300px}

@import "dojo/dojo/resources/dojo.css"

</style>

</script>

dojo.require("dojo.parser");

dojo.require("dojo.dnd.Source");

</script>

var total = 0;

function init(){

dojo.subscribe("/dnd/drop", function(source, nodes, iscopy){

var t = dojo.dnd.manager().target;

if (t == source) return;

if (t == cart) add(t, nodes);

if (t == shelf) sub(t, nodes);

});

}

function add(target, nodes){

total += parseInt(target.getItem(nodes[0].id).data);

dojo.byId('cost').innerHTML = total;

}

function sub(target, nodes){

total -= parseInt(target.getItem(nodes[0].id).data);

dojo.byId('cost').innerHTML = total;

}

dojo.addOnLoad(init);

</script>

</head>

<body>

<b>Shopping:</b><br/>

<table>

<tbody>

<tr>

<td>

<span style="background-color:green; ; height:20px">Potion of Healing(Small)</span>

</div>

<span style="background-color:pink; ; height:20px">Potion of Healing(Big)</span>

</div>

<span style="background-color:brown; ; height:20px">Health Stone</span>

</div>

<span style="background-color:yellow; ; height:20px">Healing Wards</span>

</div>

<span style="background-color:skyblue; ; height:20px">Lesser Clarity Potion</span>

</div>

<span style="background-color:red; ; height:20px">Potion of Mana</span>

</div>

</td>

<td>

</div>

</td>

</tr>

</tbody>

</table>

<b>Total amount:<span id="cost">0</span></b>

</body>

</html>

从左边拖入到右边，同时还会显示出已放入购物车的总价格。欢迎一起讨论研究。