轻松学习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 相关文章推荐
JavaScript DOM 添加事件
Feb 14 Javascript
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
表单序列化与jq中的serialize使用示例
Feb 21 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
总结Javascript中的隐式类型转换
Aug 24 Javascript
利用Javascript实现简单的转盘抽奖
Feb 13 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
Aug 16 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
vue在线动态切换主题色方案
Mar 26 Javascript
vue各种事件监听实例(小结)
Jun 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
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
PHP在linux上执行外部命令的方法
2017/02/06 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
3Z版基于jquery的图片复选框(asp.net+jquery)
2010/04/12 Javascript
Extjs中ComboBox加载并赋初值的实现方法
2012/03/22 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
2014/11/23 Javascript
window.location.hash知识汇总
2015/11/09 Javascript
jQuery实现CheckBox全选、全不选功能
2017/01/11 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
Vue2.x中利用@font-size引入字体图标报错的解决方法
2018/09/28 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
vue treeselect获取当前选中项的label实例
2020/08/31 Javascript
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
用Anaconda安装本地python包的方法及路径问题(图文)
2019/07/16 Python
Python PyQt5整理介绍
2020/04/01 Python
Python定义一个函数的方法
2020/06/15 Python
Python如何解除一个装饰器
2020/08/07 Python
Python中的流程控制详解
2021/02/18 Python
打印机墨盒:123Inkjets
2017/02/16 全球购物
安德玛加拿大官网:Under Armour加拿大
2019/10/02 全球购物
RealTek面试题
2016/06/28 面试题
药学专业大专生的自我评价
2013/12/12 职场文书
德语专业求职信
2014/03/12 职场文书
我的求职择业计划书
2014/04/04 职场文书
奥巴马胜选演讲稿
2014/05/15 职场文书
教研处工作方案
2014/05/26 职场文书
MBA推荐信怎么写
2015/03/25 职场文书
初级职称评定工作总结
2015/08/13 职场文书
SpringRetry重试框架的具体使用
2021/07/25 Java/Android
python中mongodb包操作数据库
2022/04/19 Python