jQuery EasyUI Draggable拖动组件


Posted in Javascript onMarch 01, 2017

上文已经提到过了jQuery EasyUI插件引用一般我们常用的有两种方式(排除easyload加载方式),所以本篇要总结的Draggable组件同样有两种方式加载:

(1)、使用class加载方式:

<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;">
内容部分
</div>

(2)、JS 加载调用

$('#box').draggable();

同样上文也说了,使用class属性不利于我们拓展组件的其他属性,所以我们使用JS调用的方式,后面的文章也是使用JS调用的方式。

该组件有若干属性、方法及触发事件,不在这里列举了,都放到代码示例里并且加上注释了。
示例:

<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Easy UI</title> 
<meta charset="UTF-8" /> 
<script type="text/javascript" src="easyui/jquery.min.js"></script> 
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script> 
<script type="text/javascript" src="easyui/locale/easyui-lang-zh_CN.js" ></script> 
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css" rel="external nofollow" /> 
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css" rel="external nofollow" /> 
<script> 
  $(function () { 
  $.fn.draggable.defaults.cursor = 'text';//*****采用这种方式重写默认值 
 
  $('#box').draggable({ 
    //revert : true,  默认值为false 设置为true的时候拖动结束后返回起始位置 
    //cursor : 'text', 定义拖动时指针的样式 
    //handle : '#pox', 开始拖动时的句柄,就是点击哪里可以拖动,参数是一个JQ选择器 
    //disabled : true, 设置为true的时候,禁止拖动 
    //edge : 0,  
    //axis : 'v',    不写:任意拖动 值为v:垂直拖动  值为h:水平拖动 
    //proxy : 'clone', 当使用'clone'的时候则克隆一个替代元素拖动,如果指定一个函数,则可以自定义替代元素。 
    deltaX : 50,//被拖动元素对应于当前光标位置X 
    deltaY : 50,//被拖动元素对应于当前光标位置Y 
    proxy : function (source) { 
      var p = $('<div style="width:400px;height:200px;border:1px dashed #ccc">'); 
      p.html($(source).html()).appendTo('body'); 
      return p; 
    } 
    /** 
    可触发的事件: 
     
    onBeforeDrag : function (e) { 
      alert('拖动前触发!'); 
    }, 
    onBeforeDrag : function (e) { 
      //return false; 
    }, 
    onStartDrag : function (e) { 
      alert('拖动开始触发!'); 
      console.log($('#box').draggable('proxy')); 
    }, 
    onDrag : function (e) { 
      //alert('拖动过程触发!'); 
    }, 
    onStopDrag : function (e) { 
      alert('拖动结束后触发!'); 
    } 
    */ 
     
     
  }); 
   
  //$('#box').draggable('disable');//禁止拖动 
   
  //$('#box').draggable('enable');//可以拖动 
 
  //alert($('#box').draggable('options'));  //返回对象属性 
   
}); 
 
</script> 
</head> 
<body> 
  <div id="box" style="width:400px;height:200px;background:orange;"> 
    <span id="pox">内容部分</span> 
  </div> 
</body> 
</html>

点击下载源代码:jQuery EasyUI Draggable拖动组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
告诉你什么是javascript的回调函数
Sep 04 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
Angular 4 指令快速入门教程
Jun 07 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
Vue内容分发slot(全面解析)
Aug 19 Javascript
微信小程序 确认框的实现(附代码)
Jul 23 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
Angular.js之作用域scope'@','=','&amp;'实例详解
Feb 28 #Javascript
jQuery EasyUI ProgressBar进度条组件
Feb 28 #Javascript
jQuery实现ajax无刷新分页页码控件
Feb 28 #Javascript
jQuery EasyUI Panel面板组件使用详解
Feb 28 #Javascript
AngularJS constant和value区别详解
Feb 28 #Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 #Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
Feb 28 #Javascript
You might like
php处理json时中文问题的解决方法
2011/04/12 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
PHP7扩展开发之hello word实现方法详解
2018/01/15 PHP
利用javascript实现一些常用软件的下载导航
2009/08/03 Javascript
JS完成代码前最好对其做5件事
2013/04/07 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
动态加载jquery库的方法
2014/02/12 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
jquery实现两个图片渐变切换效果的方法
2015/06/25 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
Vue.js手风琴菜单组件开发实例
2017/05/16 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
Vue项目全局配置页面缓存之按需读取缓存的实现详解
2018/08/01 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
如何在Vue中使用CleaveJS格式化你的输入内容
2018/12/14 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
2019/09/16 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
vue elementui 实现搜索栏公共组件封装的实例代码
2020/01/20 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
点球小游戏python脚本
2018/05/22 Python
pygame实现贪吃蛇游戏(上)
2019/10/29 Python
Python数据结构dict常用操作代码实例
2020/03/12 Python
优衣库英国官网:UNIQLO英国
2016/12/25 全球购物
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
局域网标准
2016/09/10 面试题
大学生自我鉴定范文模板
2014/01/21 职场文书
矛盾论读书笔记
2015/06/29 职场文书