浏览 1832 次
|
锁定老帖子 主题：dojo1.0的dnd示例以及问题！
该帖已经被评为新手帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-02-21
<!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: #FFFFFF; } .containerLeft { 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:300px;PADDING-TOP: 5px; BORDER-BOTTOM: #669999 2px solid; } .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"){ // alert(source); for(attrubute in source) { if(attrubute=="horizontal"){ //alert(attrubute.value); } } // set the column name to object. var columnName=node.getAttribute("columnName"); // alert("columnName:"+columnName); if(columnName){ }else{ node.setAttribute("columnName",node.innerHTML); } // var value=node.innerHTML; var table=document.createElement("table"); var tbody=document.createElement("tbody"); var tr=document.createElement("tr"); var td=document.createElement("td"); td.innerHTML="value"; tr.appendChild(td); tbody.appendChild(tr); table.appendChild(tbody); node.appendChild(table); var p=document.getElementById(""+noid); p.style.styleFloat = 'left'; }if(node.parentNode.id=="left"){ var columnName=node.getAttribute("columnName"); alert(columnName); if(columnName){ alert(1); node.innerHTML=columnName; } } } } 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> <div id="dragLists"> <div style="float: left; margin: 5px;"> <h3>Source 2</h3> <div dojoType="dojo.dnd.Source" jsId="c1" id="left" class="containerLeft"> <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> <br> <br> </body> </html> 其中dojo1.0，请到官方网址下吧，这里不帖出来啦！ 我的问题是这样的，当右边有2个div的时候，比方说X与Y，然后再拖Z到X与Y中间，但是那个指示蓝色条幅出现在X那个div层的上边或者是Y那个div层的上面，怎么改动才会让这个蓝色条幅出现在X与Y中间呢？ 不知道我说的是否明白，如果有不明白的地方那个，请指出来。 声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
