Dojo之路:如何利用Dojo实现Drag and Drop效果


Posted in Javascript onApril 10, 2007

如今各种使用AJAX技术的站点都实现了Drag and Drop(拖动)效果,利用Dojo框架也可以很方便的实现,相比较其它框架,代码更少,且对浏览器的兼容性支持比较好。

先看一下效果,以下是51AJAX.com站点首页的效果,其中各个模块是可以任意拖动的:

Dojo之路:如何利用Dojo实现Drag and Drop效果

如何来实现呢?以下是具体步骤。为简单起见,做了一个Drag and Drop的Demo页面:

Dojo之路:如何利用Dojo实现Drag and Drop效果

以下是具体步骤:

1.html部分

要实现拖动,首先要有容器,其次要有可拖动的元素。在这里我们设置了三个Div作为容器,ID分别是container1,container2,container3,每个容器中各放置了一个Div作为可拖动元素,它们的class是divdrag。

2.javascript代码

首先在头部加入对dojo.js的引用,然后根据获取class为divdrag的元素,把它们注册为dojo.dnd.HtmlDragSource对象,再将container1,container2,container3注册为三个容器,且指定容器中的可拖动元素可以被拖动到的容器,以上事件封装成一个函数,增加至window.onload事件中。

    要下载完整的Dojo框架,请点击这里下载:http://download.dojotoolkit.org/release-0.3.1/dojo-0.3.1-ajax.zip

//引用以下两个dojo包  
dojo.require("dojo.style"); 
dojo.require("dojo.dnd.*"); function init(){ 
  //利用classname取到元素列表,将其注册为dojo.dnd.HtmlDragSour 
  var arr=dojo.html.getElementsByClass('divdrag') 
  for(var i=0;i<arr.length;i++){ 
   var parentDiv=arr[i].parentNode.id 
   new dojo.dnd.HtmlDragSource(arr[i],parentDiv);    
  } 
  //定义容器  
     new dojo.dnd.HtmlDropTarget("container1", ["container1","container2","container3"]);    
     new dojo.dnd.HtmlDropTarget("container2", ["container1","container2","container3"]);    
     new dojo.dnd.HtmlDropTarget("container3", ["container1","container2","container3"]);        
} 
//增加到window.onload事件中 
window.onload=function(){init();}
Javascript 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
JavaScript 学习笔记(十四) 正则表达式
Jan 22 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
vue修改对象的属性值后页面不重新渲染的实例
Aug 09 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
Nov 14 Javascript
JavaScript监听触摸事件代码实例
Dec 30 Javascript
vue基于better-scroll仿京东分类列表
Jun 30 Javascript
给moz-firefox下添加IE方法和属性
Apr 10 #Javascript
用javascript父窗口控制只弹出一个子窗口
Apr 10 #Javascript
javascript 控制弹出窗口
Apr 10 #Javascript
javascript应用:Iframe自适应其加载的内容高度
Apr 10 #Javascript
用javascript动态调整iframe高度的代码
Apr 10 #Javascript
Javascript下的keyCode键码值表
Apr 10 #Javascript
用javascript控制iframe滚动的代码
Apr 10 #Javascript
You might like
Discuz!5的PHP代码高亮显示插件(黑暗中的舞者更新)
2007/01/29 PHP
php常用数学函数汇总
2014/11/21 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
php7 参数、整形及字符串处理机制修改实例分析
2020/05/25 PHP
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
JavaScript 产生不重复的随机数三种实现思路
2012/12/13 Javascript
javascript 处理null及null值示例
2014/06/09 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
jquery.map()方法的使用详解
2015/07/09 Javascript
nodejs进阶(6)—连接MySQL数据库示例
2017/01/07 NodeJs
js自定义QQ菜单效果
2017/01/10 Javascript
javascript实现table单元格点击展开隐藏效果(实例代码)
2017/04/10 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
Vue axios 中提交表单数据(含上传文件)
2017/07/06 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
2018/08/28 Javascript
vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍
2018/09/29 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
在NodeJs中使用node-schedule增加定时器任务的方法
2020/06/08 NodeJs
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
Python中Class类用法实例分析
2015/11/12 Python
如何使用python爬取csdn博客访问量
2016/02/14 Python
Python实现随机选择元素功能
2017/09/14 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
利用Tensorflow构建和训练自己的CNN来做简单的验证码识别方式
2020/01/20 Python
Python实现桌面翻译工具【新手必学】
2020/02/12 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
如何基于Python爬取隐秘的角落评论
2020/07/02 Python
Pycharm配置lua编译环境过程图解
2020/11/28 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
沙特阿拉伯家用电器和电子产品购物网站:Sheta and Saif
2020/04/03 全球购物
致铅球运动员加油稿
2014/02/13 职场文书
员工考核评语大全
2014/04/26 职场文书
2014年数学教研组工作总结
2014/12/06 职场文书
Django框架中模型的用法
2022/06/10 Python