dojo1.0 中关于拖拽 dnd的问题!
我们公司要用dojo1.0的开源框架，这方面没有研究过的，需要我自己与研究，但是我发现不知道从何入手去看dojo1.0，那里面好乱啊，我的js功底也不错拉，为什么会这样呢？我想主要的原因是：我不懂dojo1.0的框架架构，不知道从何入手？
比方说\dojo-release-1.0.2\dojo\tests\dnd\test_dnd.html 这个个例子，我也看拉，能修改一些样式之类的东西，但是比较复杂的问题有两个我没有解决！
1：比方说现在那里面的dnd里面例子是上下拖动（拖到一个元素的上面或者下面）的，我想给他加成左右拖动（拖到一个元素的左面或者右面）的，都不知道在哪里加呢？这个我好像解决拉，能拖到左面右面，但是不是很稳定，有时候拖动的时候不起作用。
2：因为我是直接在上下拖动的效果上面修改的，所以在拖动过程中，那个蓝色的粗线条(指示控件所拖放的目的地)任然水平的，我想我现在都是左右拖动拉，所以应该把蓝色的粗线条改成是垂直的。但是一直不知道在哪里改呢？
3：怎么去读dojo1.0的框架开源代码啊？
我修改过的test_dnd.html文件内容如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head> <title>Dojo DnD test</title> <style type="text/css"> @import "../../resources/dojo.css"; @import "../../resources/dnd.css"; @import "dndDefault.css"; body { padding: 1em; background: #ededed; } .container { BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; FLOAT: left; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH:150px;HEIGHT:300px;PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid } .containerRight{ BORDER-RIGHT: #669999 2px solid; PADDING-RIGHT: 5px;HEIGHT:400px; BORDER-TOP: #669999 2px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; MARGIN: 3px; BORDER-LEFT: #669999 2px solid; WIDTH:700px;HEIGHT:400px;PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid;height:200px; } .clear { clear: both; } </style> <script type="text/javascript" src="../../dojo.js" djConfig="isDebug: false, parseOnLoad: true"></script> <script type="text/javascript"> dojo.require("dojo.parser"); dojo.require("dojo.dnd.Source"); var total = 0; function ClearMsg() { // dojo.byId("msg").innerHTML = ""; } function init(){ dojo.subscribe("/dnd/start", function(source,nodes,iscopy){ }); dojo.subscribe("/dnd/drop/before", function(source, nodes, copy, target){ if(target == c2){ } }); dojo.subscribe("/dnd/drop", function(source,nodes,iscopy){ var t = dojo.dnd.manager().target; var noid= nodes[0].id; var jsnode = source.getItem(nodes[0].id); var x=c1.getAllNodes(); for(i =0;i<x.length;i++){ //jsNode is javascript object for node //x[i] represents HTML element for the node var jsnode = c2.getItem(x[i].id); } if(nodes){ var node=nodes[0]; if(node.parentNode.id=="left"){ var value=node.innerHTML; node.innerHTML=value.substring(0,value.length-6); var p=document.getElementById(""+noid); p.style.styleFloat = 'none'; }else{ if(node.parentNode.id=="right"){ var value=node.innerHTML; // alert(value.substring(value.length-6,value.length)); if(value.substring(value.length-5,value.length)=="value"){ }else{ node.innerHTML=value+" value"; } var p=document.getElementById(""+noid); p.style.styleFloat = 'left'; } } } dojo.connect(c2, "onDndDrop", function(source, nodes, copy, target){ if(target == c2){ //console.debug(copy ? "Copying from" : "Moving from", source); } }); ClearMsg(); }); dojo.subscribe("/dnd/cancel", function(){ ClearMsg(); }); } dojo.addOnLoad(init); </script></head><body> <h1 class="testTitle">Dojo DnD test</h1> <div id="dragLists"> <div style="float: left; margin: 5px;"> <h3>Source 2</h3> <div dojoType="dojo.dnd.Source" jsId="c1" id="left" class="container"> <div class="dojoDndItem">Item <strong>X</strong></div> <div class="dojoDndItem">Item <strong>Y</strong></div> <div class="dojoDndItem">Item <strong>Z</strong></div> <div class="dojoDndItem">Item <strong>Alpha</strong></div> <div class="dojoDndItem">Item <strong>Beta</strong></div> <div class="dojoDndItem">Item <strong>Gamma</strong></div> <div class="dojoDndItem">Item <strong>Delta</strong></div> </div> </div> <div style="float: left; margin: 5px;"> <h3>Source 3</h3> <div dojoType="dojo.dnd.Source" jsId="c2" class="containerRight" id="right"> </div> </div> </div></body></html>