Draggable拖动
Draggable(拖动)组件
学习要点:
1、加载方式
2、属性列表
3、事件列表
4、方法列表
EasyUI中Draggable(拖动)组件的使用方法,这个组件不依赖于其他组件。
1、加载方式
//class方式
<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:orange;">
</div>
//JS调用
<div id="box" style="width:400px;height:200px;background:orange;">
</div>
$(function(){
$("#box").draggable();
});
2、属性
名称 类型 描述 默认值
revert boolean 回复,如果设置为true的话,拖动结束后元素将返回它的起始位置 false
cursor string 光标,拖动时的css光标(cursor) move
handle selector 句柄,启动可拖动的处理句柄,就是只有哪个组件才可以拖动元素 null
edge number 边缘,能够在其中开始可拖动的拖动宽度,就是指容器的边缘区域,边缘区域无法拖动,边缘表示所有容器的边 0
proxy string,function 代理,拖动时要使用的代理对象,设置为“clone”时,克隆元素将被用作代理。如果指定一个函数,它必须返回一个jQuery对象,这个jquery对象也就是代理对象
deltax number 拖动的元素相当于当前光标的x轴位置,只有启动代理才生效 null
deltaY number 拖动的元素相当于当前光标y轴的位置,只有启动代理才生效 null
disabled boolean 如果设置为true,则可停止拖动 false
axis string 轴,定义拖动元素可在其上移动的轴,可用‘v’或者‘h’ null
3、事件
名称 参数 描述
onBeforeDrag e 拖动前触发,返回false就取消拖动
onStartDrag e 目标开始拖动时触发
onDrag e 拖动期间触发,返回false将不进行实际的拖动
onStopDrag e 拖动停止时触发
4、方法
名称 参数 描述
options none 返回选项(options)属性(property)
proxy none 如果设置了代理(proxy)就返回拖动代理(proxy)
这个只有在拖动时有效,我们把它放在开是拖动的事件中
enable none 启用拖动动作
disable none 禁用拖动动作
设置默认值对象:$.fn.draggable.defaults重写默认对象
$fn.draggable.defaults.cursor = 'text';
<html>
<title>index</title>
<head>
<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>
<script type="text/javascript" src="../../js/01/t2.js"></script>
<link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css">
</head>
<body>
<!--
<div id="box" class="easyui-draggable" style="width:400px;height:200px;background:orange;">
</div>
-->
<div id="box" style="width:400px;height:200px;background:orange;">
<span id="pox">拖动区域</span>
</div>
</body>
</html> $(function(){
$.fn.draggable.defaults.cursor = 'text';
$("#box").draggable({
//revert : true,
//cursor : "text",
//handle : "#pox",
//edge : 50
proxy : "clone",
//proxy : function(source){
//var p = $('<div style="border:1px solid red; width:400px; height:200px;"></div>');
//p.html($(source).html()).appendTo("body");
//return p;
//},
//deltaX : 50,
//deltaX : 50
//disabled : true,
//axis : 'v'
//onBeforeDrag : function(e){
//alert("拖动前触发");
//}
//onBeforeDrag : function(e){
//return fasle;
//}
//onStartDrag : function(e){
//alert("拖动开始时触发");
//console.log($('#box').draggable('proxy'));
//}
//onDrag : function(e){
//alert("拖动过程中触发");
//}
//onStopDrag : function(e){
//alert("拖动结束后触发");
//}
}); //$('#box').draggable('disable');
//$('#box').draggable('enable');
//console.log($('#box').draggable('options'));
//console.log($('#box').draggable('options')); });
Draggable拖动的更多相关文章
- 第一百九十三节,jQuery EasyUI,Draggable(拖动)组件
Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组 ...
- Draggable(拖动)组件
一.加载方式 //class 加载方式 <div id="box" class="easyui-draggable" style="width: ...
- EasyUI - Draggable 拖动控件
效果: html代码: <div id="box" style="width: 400px; height: 200px; background-color: #f ...
- jQuery Easy UI Draggable(拖动)组件
上文已经提到过了 jQuery EasyUI插件引用一般我们经常使用的有两种方式(排除easyload载入方式),所以本篇要总结的Draggable组件相同有两种方式载入: (1).使用class载入 ...
- Draggable(拖动框)
一.class加载方式 <div id="box" class="easyui-draggable" style="width:400px;he ...
- Vue.Draggable
Vue.Draggable拖动效果 下载包:npm install vue-draggable --save 组件中引进依赖: import draggable from 'vuedraggable' ...
- EasyUI中Base(基础)的基本用法
EasyUI中Base(基础)的用法 一.Base(基础) 1.parser 解析器 2.easyloader 简单加载 3.draggable 拖动 4.droppable 放置 5.resizab ...
- jQuery Easy UI 开发笔记
1.jQuery Easy UI主要的运行原理是通过核心的代码调用插件来实现UI效果的 2.jQuery Easy UI插件与插件之间的关系是: 一.独立式插件: 独立式插件是指:不与其他的插件具有相 ...
- JqueryEasyUI教程
第一章EasyUI中弹出框dialog的使用为div标签加上class="easyui-dialog"即可使用一.引入文件介绍jquery.min.js:jquery核心文件,不再 ...
随机推荐
- 字符编码的发展(ASCII、Unicode、utf-8)
最近一直在看廖雪峰老师的python网上教程,python内容简单易理解,就没整理,但是字符串编码作为一直困扰自己的问题,看了几遍文章,最终还是将其整理如下,本篇博客总结自廖雪峰老师的网上教程:htt ...
- iOS “弱账号” 暗转 “强账号”
一.背景 由于某些历史原因,我们产品中50%以上活跃用户是弱账户.即 客户端按照某种规则生成的一个伪id 存在keychain 里,作为这个用户的唯一标识,实现快速登录.正常情况下是不会有问题. 最近 ...
- 前端隐藏Ios及安卓滚动条
1.方法不通用 // .scroll_list::-webkit-scrollbar { display:none } .scroll_list::-webkit-scrollbar-track { ...
- Linux 安全配置指南
1.Bios Security 一定要给Bios设置密码,以防通过在Bios中改变启动顺序,而可以从软盘启动.这样可以阻止别人试图用特殊的启动盘启动你的系统,还可以阻止别人进入Bios改动其中的设置( ...
- [转]总结一下CSS中的定位 Position 属性
在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱,今记录总结一下,防止久而忘之. CSS position 属性值: absol ...
- 为什么修改Host不生效
开发验证的好好的功能,提测后经常有测试反应功能有bug.很多原因都是测试切换host没生效造成的,为什么切换host后刷新页面了也没生效呢? 不生效原因: Keep-Alive 服务器在响应头设置了 ...
- windows安装git客户端
1:线上git地址 https://github.com/ 2:tortoiseGit地址 http://tortoisegit.org 3:安装步骤 操作系统:Windows XP SP3 Git客 ...
- Python Date 1–Hello world print
对比学习Python与C str1 = 'hello python 2'# 字符串i = 3.1415926535 print(str1)print("hello python\n" ...
- CSS Link(链接)
CSS Link(链接) 不同的链接可以有不同的样式. 一.链接样式 链接的样式,可以用任何CSS属性(如颜色,字体,背景等). 特别的链接,可以有不同的样式,这取决于他们是什么状态. 这四个链接状态 ...
- awk十三问-【AWK学习之旅】
---===AWK学习之旅===--- 十三个常用命令行处理 [root@monitor awkdir]# cat emp.txt Beth 4.00 0 Dan 3.75 0 Kathy 4.0 ...