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 相关文章推荐
来自chinaz的ajax获取评论代码
May 03 Javascript
JS提交并解析后台返回的XML的代码
Nov 03 Javascript
鼠标经过的文本框textbox变色
May 21 Javascript
JavaScript Array扩展实现代码
Oct 14 Javascript
JS判定是否原生方法
Jul 22 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
Sep 23 Javascript
2种jQuery 实现刮刮卡效果
Feb 01 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 Javascript
Vue自定义图片懒加载指令v-lazyload详解
Dec 31 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
vue中解决拖拽改变存在iframe的div大小时卡顿问题
Jul 22 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
Oct 27 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
PHP使用JSON和将json还原成数组
2015/02/12 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
Zend Framework教程之配置文件application.ini解析
2016/03/10 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
javascript 贪吃蛇实现代码
2008/11/22 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
JavaScript的单例模式 (singleton in Javascript)
2010/06/11 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
JS实现字体选色板实例代码
2013/11/20 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
IE与FireFox的JavaScript兼容问题解决办法
2013/12/31 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
利用Angularjs和bootstrap实现购物车功能
2016/08/31 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
解决html input验证只能输入数字,不能输入其他的问题
2017/07/21 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
python 实现围棋游戏(纯tkinter gui)
2020/11/13 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
C#基础面试题
2016/10/17 面试题
中英文自我评价常用句型
2013/12/19 职场文书
缓刑人员的思想汇报
2014/01/11 职场文书
春节活动策划方案
2014/01/24 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
公司寄语大全
2014/04/10 职场文书
《最大的麦穗》教学反思
2014/04/17 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
2014年医务科工作总结
2014/12/18 职场文书