dojo1.0的dnd示例以及问题！(蓝色条幅的位置问题！)

DiligencyMan 2008-02-21 05:41:57

<!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中间呢？

不知道我说的是否明白，如果有不明白的地方那个，请指出来。

...全文