学习Ajax框架之dojo:第四节——Dojo拖拽效果的实现(附源代码)
来源:互联网 发布:hr软件inuoji 编辑:程序博客网 时间:2024/05/21 14:56
Dojo在dojo.dnd包中提供了对页面元素拖拽效果的支持,其中用于实现拖拽效果的关键类如下。
<1> dojo.dnd.HtmlDragSource
<2> dojo.dnd.HtmlDragMoveSource
<3> dojo.dnd.HtmlDropTarget
<4> dojo.dnd.HtmlDragCopySource
接下来,看看这四个类的使用方法。
首先,定义两个div和一个列表:
<div id="drag1" style="width:200px;height:200px;background:bule">
拖动模块1
</div>
<br/>
<div id="drag2" style="width:400px;height:400px;background:yellow">
拖动模块2
</div>
<ul id="list1">
<li>
列表1,条目1
</li>
<li>
列表1,条目2
</li>
<li>
列表1,条目3
</li>
</ul>
<ul id="list2">
<li>
列表2,条目1
</li>
<li>
列表2,条目2
</li>
<li>
列表2,条目3
</li>
</ul>
定义css:
<style type="text/css">
ul {
position: relative;
list-style: none;
margin: 0;
padding: 0;
overflow: visible;
}
li {
margin: 3px 0;
padding: 3px 3em 3px 10px;
border: 2px solid #456;
background-color: #cde;
cursor: move;
}
</style>
实例一:简单拖拽效果
功能:拖拽标签drag1,鼠标松开时,该标签又回到原位置
关键类:dojo.dnd.HtmlDragSource: 实现页面元素的拖拽效果
主要代码:
<script type="text/javascript">
dojo.require("dojo.dnd.*");
dojo.require("dojo.event.*");
function init(){
var drag_comeback= dojo.byId("drag1");
new dojo.dnd.HtmlDragSource(drag_comeback, "drag1");
}
dojo.event.connect(dojo, "loaded", "init");
</script>
实例二:拖拽移动对象
功能:拖拽标签drag2,鼠标松开时,该标签将停留在鼠标松开的位置
关键类: dojo.dnd.HtmlDragMoveSource: 实现页面元素的自由拖放效果
主要代码:
<script type="text/javascript">
dojo.require("dojo.dnd.HtmlDragMove");
dojo.require("dojo.dnd.*");
dojo.require("dojo.event.*");
function init(){
new dojo.dnd.HtmlDragMoveSource(dojo.byId("drag2"));
}
dojo.event.connect(dojo, "loaded", "init");
</script>
实例三:接受拖拽对象
功能:页面中包含两个列表对象list1和list2,通过新建dojo.dnd.HtmlDropTarget类的对象实例,list1和list2都具有接受被拖拽元素的能力,可以拖放到list1和list2任何一个列表中。
关键类:dojo.dnd.HtmlDropTarget: 使页面元素成为被拖拽元素的目标对象
主要代码:
<script type="text/javascript">
dojo.require("dojo.dnd.*");
dojo.require("dojo.event.*");
function init(){
//使列表对象list1能够接受被拖拽元素,被拖拽元素的类型是"li1"
var list1 = document.getElementById("list1");
new dojo.dnd.HtmlDropTarget(list1, ["li1"]);
//使list1中的每一个列表项元素能够被拖拽,其类型是“li1”
var lis = list1.getElementsByTagName("li");
for (var x = 0; x < lis.length; x++) {
new dojo.dnd.HtmlDragSource(lis[x], "li1");
}
//使列表对象list2能够接受被拖拽元素,被拖拽元素的类型是"li1"
var list2 = document.getElementById("list2");
new dojo.dnd.HtmlDropTarget(list2, ["li1"]);
//使list2中的每一个列表项元素能够被拖拽,其类型是“li1”
var lis = list2.getElementsByTagName("li");
for (var x = 0; x < lis.length; x++) {
new dojo.dnd.HtmlDragSource(lis[x], "li1");
}
}
dojo.event.connect(dojo, "loaded", "init");
</script>
实例四:复制拖拽效果
功能:拖拽目标对象中新增一个被拖拽元素的拷贝。如,两个列表中的列表项均可以在两个列表中进行拖拽,当拖拽动作完成之后,被拖拽的列表项仍然保持不变,而目前位置会新增一份被拖拽列表项的拷贝。
关键类:dojo.dnd.HtmlDragCopySource: 实现页面元素的复制拖拽效果
主要代码:
<script type="text/javascript">
dojo.require("dojo.dnd.*");
dojo.require("dojo.dnd.HtmlDragCopy");
dojo.require("dojo.event.*");
function init(){
//使列表对象list1能够接受被拖拽元素,被拖拽元素的类型是"li1"
var list1 = document.getElementById("list1");
new dojo.dnd.HtmlDropTarget(list1, ["li1"]);
//使list1中的每一个列表项元素能够被拖拽,其类型是“li1” ;同时具有复制拖拽的功能
var lis = list1.getElementsByTagName("li");
for (var x = 0; x < lis.length; x++) {
new dojo.dnd.HtmlDragCopySource(lis[x], "li1", false);
}
//使列表对象list2能够接受被拖拽元素,被拖拽元素的类型是"li1"
var list2 = document.getElementById("list2");
new dojo.dnd.HtmlDropTarget(list2, ["li1"]);
//使list2中的每一个列表项元素能够被拖拽,其类型是“li1” ;同时具有复制拖拽的功能
var lis = list2.getElementsByTagName("li");
for (var x = 0; x < lis.length; x++) {
new dojo.dnd.HtmlDragCopySource(lis[x], "li1", false);
}
}
dojo.event.connect(dojo, "loaded", "init");
</script>
- 学习Ajax框架之dojo:第四节——Dojo拖拽效果的实现(附源代码)
- 学习Ajax框架之dojo:第八节——Dojo的Layout Widget(附源代码)
- 学习Ajax框架之dojo:第十节——Dojo的 Form Widget (附源代码)
- 学习Ajax框架之dojo:第七节——初识Dojo widget(附源代码)
- 学习Ajax框架之dojo:第十二节——Dojo的General Widget(下)(附源代码)
- 学习Ajax框架之dojo:第六节——dojo类的声明和继承(附源代码)
- 学习Ajax框架之dojo:第五节——dojo拖拽事件小结(附源代码)
- 学习Ajax框架之dojo:第十一节——Dojo 的General Widget(上)(附源代码)
- 学习Ajax框架之dojo:第三节——dojo中xmlHttp的用法(附源代码)
- 学习Ajax框架之dojo:第二节---Dojo的基本函数及使用实例(附源代码)
- 学习Ajax框架之dojo:第九节——详谈FloatingPane widget (附源代码)
- 学习Ajax框架之dojo:第十三节——如何编写自己的dojo widget
- 学习Ajax框架之dojo:dojo widget
- AJAX框架之DOJO
- AJAX框架之DOJO
- Dojo—ajax框架实战
- 学习Ajax框架之dojo:第一节---ATF配置和Dojo实例资源(转)
- ajax框架之dojo篇(一)
- javascript获取当前游览器的类型版本
- 学习Ajax框架之dojo:第三节——dojo中xmlHttp的用法(附源代码)
- finalize方法
- 通过secureCRT远程连接服务器后安装mysql
- p2p相关资源
- 学习Ajax框架之dojo:第四节——Dojo拖拽效果的实现(附源代码)
- oracle sql笔记
- jquery获取下拉框的值
- 学习Ajax框架之dojo:第五节——dojo拖拽事件小结(附源代码)
- 黑马程序员--Java基础总结---网络编程
- VBS发送邮件(163邮箱到QQ邮箱或Gmail)
- ViewPager in a ListView or a ScrollView[solution]
- 《Go语言程序设计》第3章练习
- eclipse tomcat内存加大,不然老是运行项目超内存