轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作


Posted in Javascript onNovember 30, 2015

本教程向您展示如何使 HTML 元素可拖动,在本例中,我们将创建三个 DIV 元素然后启用他们的拖动和放置。

轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作

首先,我们创建三个<div> 元素:

<div id="dd1" class="dd-demo"></div>
<div id="dd2" class="dd-demo"></div>
<div id="dd3" class="dd-demo"></div>

对于第一个>div<元素,我们通过默认值让其可以拖动。
$('#dd1').draggable();
对于第二个 <div> 元素,我们通过创建一个克隆(clone)了原来元素的代理(proxy)让其可以拖动。

$('#dd2').draggable({
 proxy:'clone'
});

对于第三个<div> 元素,我们通过创建自定义代理(proxy)让其可以拖动。

$('#dd3').draggable({
 proxy:function(source){
 var p = $('<div class="proxy">proxy</div>');
 p.appendTo('body');
 return p;
 }
});

下面为大家分享学校课程表简单实例,欢迎大家学习:

 我们将创建两个表格:在左侧显示学校科目,在右侧显示时间表。 您可以拖动学校科目并放置到时间表单元格上。 学校科目是一个 <div class="item"> 元素,时间表单元格是一个 <td class="drop"> 元素。

轻松学习jQuery插件EasyUI EasyUI实现拖动基本操作

显示学校科目

<div class="left">
 <table>
 <tr>
  <td><div class="item">English</div></td>
 </tr>
 <tr>
  <td><div class="item">Science</div></td>
 </tr>
 <!-- other subjects -->
 </table>
</div>

显示时间表

<div class="right">
 <table>
 <tr>
  <td class="blank"></td>
  <td class="title">Monday</td>
  <td class="title">Tuesday</td>
  <td class="title">Wednesday</td>
  <td class="title">Thursday</td>
  <td class="title">Friday</td>
 </tr>
 <tr>
  <td class="time">08:00</td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
  <td class="drop"></td>
 </tr>
 <!-- other cells -->
 </table>
</div>

拖动在左侧的学校科目

$('.left .item').draggable({
 revert:true,
 proxy:'clone'
});

放置学校科目在时间表单元格上

$('.right td.drop').droppable({
 onDragEnter:function(){
 $(this).addClass('over');
 },
 onDragLeave:function(){
 $(this).removeClass('over');
 },
 onDrop:function(e,source){
 $(this).removeClass('over');
 if ($(source).hasClass('assigned')){
  $(this).append(source);
 } else {
  var c = $(source).clone().addClass('assigned');
  $(this).empty().append(c);
  c.draggable({
  revert:true
  });
 }
 }
});

正如您所看到的上面的代码,当用户拖动在左侧的学校科目并放置到时间表单元格中时,onDrop 回调函数将被调用。我们克隆从左侧拖动的源元素并把它附加到时间表单元格上。 当把学校科目从时间表的某个单元格拖动到其他单元格,只需简单地移动它即可。

以上就是为大家展示的如何使用jQuery EasyUI创建一个学校课程表,希望对大家的学习有所帮助,大家会喜欢,并且继续关注小编的下一篇文章。

Javascript 相关文章推荐
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
javascript innerText和innerHtml应用
Jan 28 Javascript
jquery 操作iframe的几种方法总结
Dec 13 Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
如何理解Vue的render函数的具体用法
Aug 30 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
Vue.js进阶知识点总结
Apr 01 Javascript
React学习之受控组件与数据共享实例分析
Jan 06 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
关于JS中的作用域中的问题思考分享
Apr 06 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 #Javascript
javascript for-in有序遍历json数据并探讨各个浏览器差异
Nov 30 #Javascript
基于javascript如何传递特殊字符
Nov 30 #Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 #Javascript
全面解析Bootstrap排版使用方法(文字样式)
Nov 30 #Javascript
javascript中eval和with用法实例总结
Nov 30 #Javascript
JavaScript基础篇(3)之Object、Function等引用类型
Nov 30 #Javascript
You might like
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
phpinfo 系统查看参数函数代码
2009/06/05 PHP
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
php变量作用域的深入解析
2013/06/03 PHP
js tab效果的实现代码
2009/12/26 Javascript
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
让textarea自动调整大小的js代码
2011/04/12 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
jquery和ajax的关系详细介绍
2013/11/29 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
JQuery复制DOM节点的方法
2015/06/11 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
JavaScript导航脚本判断当前导航
2016/07/12 Javascript
AngularJS指令用法详解
2016/11/02 Javascript
jquery心形点赞关注效果的简单实现
2016/11/14 Javascript
javascript 中的继承实例详解
2017/05/05 Javascript
JS基于Location实现访问Url、重定向及刷新页面的方法分析
2018/12/03 Javascript
详细介绍解决vue和jsp结合的方法
2020/02/06 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
[26:52]LGD vs EG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
linux系统使用python获取内存使用信息脚本分享
2014/01/15 Python
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
Python通过DOM和SAX方式解析XML的应用实例分享
2015/11/16 Python
python 性能提升的几种方法
2016/07/15 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
Python使用matplotlib绘图无法显示中文问题的解决方法
2018/03/14 Python
安装Pycharm2019以及配置anconda教程的方法步骤
2019/11/11 Python
Python 实现PS滤镜中的径向模糊特效
2020/12/03 Python
Canvas中设置width与height的问题浅析
2018/11/01 HTML / CSS
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
杭州龙健科技笔试题.net部分笔试题
2016/01/24 面试题
大一期末自我鉴定
2013/12/13 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
js Proxy的原理详解
2021/05/25 Javascript