<!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中间呢？
不知道我说的是否明白，如果有不明白的地方那个，请指出来。
分享到：
- 2008-02-21 17:40
- 浏览 928
- 评论(0)
- 论坛回复 / 浏览 (0 / 1834)
- 查看更多
相关推荐
在这个“first.html”文件中，很可能包含了DOJO1.0库的引入，以及使用DOJO编写的JavaScript代码来展示基本功能或者一个简单的应用示例。 在这个基于DOJO1.0的程序中，我们可以学习到以下知识点： 1. **DOJO库的...
Dojo是一个强大的开源JavaScript工具包，旨在简化Web开发，尤其在处理AJAX、DOM操作、数据管理、动画效果以及模块化开发等方面具有显著优势。 1. **Dojo简介** Dojo是一个全面的JavaScript框架，包括丰富的UI组件...
很不错的中文教程！文件太大分3个包！ 目录如下： dojo精品中文教程 ...dojo的拖拽示例以及疑问！ 介绍dojo事件 使用 Dojo 工具包和 JSON-RPC 构建企业 SOA Ajax 客户端 利用Dojo实现拖动（Drag and Drop）效果
### Dojo API 1.0 中文文档知识点详解 #### Dojo API 概览 Dojo API 是一款功能丰富的 JavaScript 库，旨在帮助开发者构建高性能的 Web 应用程序。Dojo API 1.0 版本是该库的一个重要里程碑，提供了大量的工具和...
很不错的中文教程！文件太大分3个包！ 目录如下： dojo精品中文教程 ...dojo的拖拽示例以及疑问！ 介绍dojo事件 使用 Dojo 工具包和 JSON-RPC 构建企业 SOA Ajax 客户端 利用Dojo实现拖动（Drag and Drop）效果
分三个包上传时，第三个包好像传不上去，我给整合了一下，打在一个包里...dojo的拖拽示例以及疑问！ 介绍dojo事件 使用 Dojo 工具包和 JSON-RPC 构建企业 SOA Ajax 客户端 利用Dojo实现拖动（Drag and Drop）效果
很不错的教程！文件太大分三个包上传的！ 目录如下： ...dojo的拖拽示例以及疑问！ 介绍dojo事件 使用 Dojo 工具包和 JSON-RPC 构建企业 SOA Ajax 客户端 利用Dojo实现拖动（Drag and Drop）效果
### Dojo Toolkit 1.0 与 WebSphere 6 的集成及应用实例 #### 概述 本文将详细介绍如何在WebSphere Portal 6环境中利用Dojo Toolkit 1.0进行开发，通过逐步引导的方式帮助读者了解整个过程。Dojo是一个基于...
这个压缩包包含了 Dojo 的多个历史版本，包括0.9、1.0和1.4。这些版本见证了Dojo从早期到成熟的发展过程，每个版本都有其特定的功能特性和改进。 Dojo 0.9 是Dojo工具箱的早期版本，它提供了基础的JavaScript功能，...
这个资源集合包括了《DOJO权威指南》的中文版以及DOJO 1.1的源代码，为深入理解和应用DOJO框架提供了宝贵的资料。 1. **DOJO框架概述** DOJO是JavaScript开发的一个强大框架，它支持模块化编程，提供数据绑定、...
源代码文件"example_code"包含了书中各种示例和练习的实现，这些代码有助于理解Dojo的核心概念和API用法。以下是一些关键知识点： 1. **Dojo模块系统**：Dojo采用AMD（Asynchronous Module Definition）模式，允许...
Dojo Book 0.9-1.0 chm 版,Ajax 辅助。
Dojo 是一个强大的JavaScript工具库，它为Web开发提供...每个`code`文件可能就是一个具体的Dojo示例，演示了如何运用这些知识点解决问题。通过深入学习和实践，你可以更好地掌握Dojo库，并高效地开发高质量的Web应用。
@ dojo /示例 该存储库包含使用Dojo构建的示例应用程序。 有关Dojo的最新进展，贡献准则和其他信息，请访问 。 例子 这是此存储库中可用的当前示例的表，并附有代码和托管的演示： 例子 代码 演示版 沙盒 概述 ...
在这个"EDT Dojo Sample 示例程序"中，我们主要探讨以下几个关键知识点： 1. EGL Rich UI：EGL Rich UI 是EDT的一项重要特性，它允许开发者创建具有现代图形用户界面（GUI）的应用程序。EGL支持多种编程模型，包括...
- **环境相关包**：处理浏览器兼容性问题，确保DOJO在不同环境下稳定运行。 - **Widget系统**：最高层，包含众多预先构建的UI组件，基于MVC，可自定义样式并处理事件。 ### 3. 主要模块 - `dojo.io`：包含多种IO...
通过这个例子，你可以学习如何使用Dojo进行模块化开发，编写测试用例，以及如何利用Dojo的各个模块来处理数据、响应用户交互等。深入理解并实践这些内容，将有助于提升你的前端开发和测试能力。