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 相关文章推荐
node.js中的path.dirname方法使用说明
Dec 09 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
javascript实现添加附件功能的方法
Nov 18 Javascript
学习vue.js条件渲染
Dec 03 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
JS实现京东首页之页面顶部、Logo和搜索框功能
Jan 12 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
Jan 12 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
Apr 13 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
antd Upload 文件上传的示例代码
Dec 14 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
php apache开启跨域模式过程详解
2019/07/08 PHP
JavaScript中void(0)的具体含义解释
2007/02/27 Javascript
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
Javascript数据结构与算法之列表详解
2015/03/12 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
vue中echarts3.0自适应的方法
2018/02/26 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
Vue+Webpack完美整合富文本编辑器TinyMce的方法
2018/11/30 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
Python之str操作方法(详解)
2017/06/19 Python
JSONLINT:python的json数据验证库实例解析
2017/11/28 Python
Python迭代器与生成器基本用法分析
2018/07/26 Python
Python文件读写常见用法总结
2019/02/22 Python
浅谈Python描述数据结构之KMP篇
2020/09/06 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
python 实现图片批量压缩的示例
2020/12/18 Python
html5视频媒体标签video的使用方法及完整参数说明详解
2019/09/27 HTML / CSS
美国最大的万圣节服装网站:HalloweenCostumes.com
2017/10/12 全球购物
施华洛世奇韩国官网:SWAROVSKI韩国
2018/06/05 全球购物
澳大利亚家居用品零售商:Harris Scarfe
2020/10/10 全球购物
卫校毕业生自我鉴定
2013/10/31 职场文书
关于安全演讲稿
2014/05/09 职场文书
2015年消防工作总结
2015/04/24 职场文书
公务员保密工作承诺书
2015/05/04 职场文书
JS一分钟在github+Jekyll的博客中添加访问量功能的实现
2021/04/03 Javascript
能用CSS实现的就不要麻烦JavaScript了
2021/10/05 HTML / CSS