轻松学习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 相关文章推荐
jquery实现带复选框的表格行选中删除时高亮显示
Aug 01 Javascript
jQuery固定浮动侧边栏实现思路及代码
Sep 28 Javascript
javascript实现跨域的方法汇总
Jun 25 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
Node.js获取前端ajax提交的request信息
Feb 20 Javascript
详解AngularJS controller调用factory
May 19 Javascript
JS按钮闪烁功能的实现代码
Jul 21 Javascript
Promise.all中对于reject的处理方法
Aug 01 Javascript
Vue实现购物车的全选、单选、显示商品价格代码实例
May 06 Javascript
jQuery轮播图功能制作方法详解
Dec 03 jQuery
JavaScript实现拖拽和缩放效果
Aug 24 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会员权限控制实现原理分析
2011/05/29 PHP
PHP中文分词的简单实现代码分享
2011/07/17 PHP
PHP正则表达式之定界符和原子介绍
2012/10/05 PHP
做了CDN获取用户真实IP的函数代码(PHP与Asp设置方式)
2013/04/13 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
destoon官方标签大全
2014/06/20 PHP
php查询操作实现投票功能
2016/05/09 PHP
thinkPHP5.0框架URL访问方法详解
2017/03/18 PHP
Redis在Laravel项目中的应用实例详解
2017/08/11 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
用JavaScript页面不刷新时全选择,全删除(GridView)
2009/04/14 Javascript
jQuery UI Autocomplete 体验分享
2012/02/14 Javascript
基于jquery的图片轮播 tab切换组件
2012/07/19 Javascript
Javascript图像处理—虚拟边缘介绍及使用方法
2012/12/27 Javascript
javascript history对象详解
2017/02/09 Javascript
在js中做数字字符串补0(js补零)
2017/03/25 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
基于js实现逐步显示文字输出代码实例
2020/04/02 Javascript
js校验开始时间和结束时间
2020/05/26 Javascript
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
Python 使用list和tuple+条件判断详解
2019/07/30 Python
python飞机大战pygame游戏之敌机出场实现方法详解
2019/12/17 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
学校介绍信范文
2014/01/14 职场文书
驾驶员安全责任书范本
2014/07/24 职场文书
领导干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers