轻松学习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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
JavaScript中的类继承
Nov 25 Javascript
js AppendChild与insertBefore用法详细对比
Dec 16 Javascript
获取中文字符串的实际长度代码
Jun 05 Javascript
JS运动框架之分享侧边栏动画实例
Mar 03 Javascript
Jquery和JS获取ul中li标签的实现方法
Jun 02 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
详解微信小程序input标签正则初体验
Aug 18 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
修改layui的后台模板的左侧导航栏可以伸缩的方法
Sep 10 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 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
解决PHP在DOS命令行下却无法链接MySQL的技术笔记
2010/12/29 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
javascript事件模型代码
2007/07/01 Javascript
用jquery的方法制作一个简单的导航栏
2014/06/23 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
Javascript下拉刷新的简单实现
2017/02/14 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
vue axios请求拦截实例代码
2018/03/29 Javascript
echarts实现词云自定义形状的示例代码
2019/02/20 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Python机器学习k-近邻算法(K Nearest Neighbor)实例详解
2018/06/25 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
python把转列表为集合的方法
2019/06/28 Python
Django实现跨域请求过程详解
2019/07/25 Python
python字符串常用方法及文件简单读写的操作方法
2020/03/04 Python
python框架flask入门之环境搭建及开启调试
2020/06/07 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
荷兰最大的儿童服装店:The Kids Republic
2019/04/13 全球购物
经典c++面试题二
2015/08/14 面试题
评析教师个人的自我评价
2014/02/19 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android