JQuery EasyUI---Draggable( 拖动) 组件

学习要点:

1.加载方式
2.属性列表
3.事件列表
4.方法列表

本节重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其他组件。

一. 加载方式

//class 加载方式  这种方式看起来html代码不干净,会污染html。建议使用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>
<script type="text/javascript" src="js/index.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" style="width:400px;height:200px;background:orange;">

</div>
</body>
</html>

//JS 加载调用

//JS 加载调用
$(‘#box‘).draggable();

二. 属性列表

Draggable  属性

属性名          值                                     说明
Proxy         null/string、 function            当使用‘clone‘,则克隆一个替代元素拖动。如果指定一个函数,则自定义替代元素。
revert         false/boolean                      设置为 true,则拖动停止时返回起始位置
cursor        move/string                         拖动时的 CSS 指针样式
deltaX         null/number                        被拖动的元素对应于当前光标位置 x
deltaY         null/number                        被拖动的元素对应于当前光标位置 y
handle         null/selector                       开始拖动的句柄
disabled       false/boolean                      设置为 true,则停止拖动
edge           0/number                           可以在其中拖动的容器的宽度
axis             null/string                          设置拖动为垂直‘v‘,还是水平‘h‘

JS代码

$(‘#box‘).draggable({
        revert : true,
        cursor : ‘text‘,
        handle : ‘#pox‘,
        disabled : true,
        edge : 180,
        axis : ‘v‘,
        proxy : ‘clone‘,
        deltaX : 50,
        deltaY : 50,
        proxy : function (source) {
            var p = $(‘<div style="width:400px;height:200px;border:1px dashed #ccc">‘);
            p.html($(source).html()).appendTo(‘body‘);
            return p;
        }

    });

三、事件列表

事件名                        传参                    说明
onBeforeDrag             e                        拖动之前触发,返回 false 将取消拖动
onStartDrag               e                        拖动开始时触发
onDrag                      e                        拖动过程中触发,不能拖动时返回 false
onStopDrag               e                        拖动停止时触发

$(‘#box‘).draggable({
onBeforeDrag : function (e) {
        alert(‘拖动之前触发!‘);
        return false;
},
onStartDrag : function (e) {
        alert(‘拖动时触发!‘);
},
onDrag : function (e) {
        alert(‘拖动过程中触发!‘);
},
onStopDrag : function (e) {
        alert(‘在拖动停止时触发!‘);
},
});            

四. 方法列表

事件名       传参        说明
options     none       返回属性对象
proxy       none        如果代理属性被设置则返回该拖动代理元素
enable       none       允许拖动
disable      none       禁止拖动

$(‘#box‘).draggable(‘disable‘);
$(‘#box‘).draggable(‘enable‘);
console.log($(‘#box‘).draggable(‘options‘));

上面的方法直接是元素绑定draggable之后直接传入相关参数即可

时间: 2024-10-12 06:44:58

JQuery EasyUI---Draggable( 拖动) 组件的相关文章

第一百九十三节,jQuery EasyUI,Draggable(拖动)组件

Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组件. 一.加载方式 //class 加载方式 <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 &l

jQuery Easy UI Draggable(拖动)组件

上文已经提到过了 jQuery EasyUI插件引用一般我们常用的有两种方式(排除easyload加载方式),所以本篇要总结的Draggable组件同样有两种方式加载: (1).使用class加载方式: <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 </div> (2).JS 加载调

Jquery easyUi Droppable(放置)组件

生活就是不断的让自己活下去,而我们如何活下去,就是靠不断的完善自己.所以今天我们来看看Jquery easyUi的Droppable(放置)组件. 一.加载方式 在使用放置组件时,有一个前提条件,那就是需要有一个可以拖拽的元素,不然我们的放置组件将毫无意义.所以我们这里默认有一个ID为"bb"的元素是设置了课拖拽的. 1.css样式加载方式 <div id="box" class="easyui-droppable" data-option

JQuery EasyUI的常用组件

jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一.表单 form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等.当提交表单的时候可以调用validate方法检查表单是否有效. 用法: 使用form标签创建 <form id="ff" method="post"> <

Draggable(拖动)组件 属性、事件、方法

Draggable(拖动)即实现页面元素的拖动效果. 一.加载方式 1.css样式加载: <div id="box" class="easyui-draggable" style="width:200px;height:150px;background:#F5F6F7;">     内容部分 </div> 使用css样式加载Draggable,方便快捷,但是不利于管理,所以我们有课第二种加载方式,使用Jquery方式加载,

Draggable(拖动)组件

1 一.加载方式 2 //class 加载方式 3 4 <div id="box" class="easyui-draggable" style="width:400px;height:200px;background:red;"> 内容部分 </div> 5 6 7 //JS 加载调用 8 9 $('#box').draggable(); 加载方式 属性列表 //属性设置 $('#box').draggable({ re

第二百零三节,jQuery EasyUI,Window(窗口)组件

jQuery EasyUI,Window(窗口)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Window(窗口)组件的使用方法,这个组件依赖于 Panel(面 板)组件.resizable(调整大小)和 draggable(拖动)组件.这个组件扩展与 Panel 组件, 最大的优势就是调整大小和拖动以及内部布局. 一.加载方式 class 加载方式 <div id="box" class="easyui-w

jQuery EasyUI Datagrid性能优化专题(转)

jQuery  EasyUI的Datagrid组件功能算是很强大了,不过性能确实不怎么乐观,而对于性能问题,网络上几乎也找不到相关的优化资料,所谓的牛人们可能 都望而却步了.本博客以后会带着分析Datagrid组件的性能问题,并且给出优化方案,也希望大家能集思广益,给出一些好的想法. 慢在哪些方面 以目前对Datagrid的了解程度去看待性能问题,主要有以下几点: 加载大数据量时比较慢(不考虑服务端返回数据的时间),这点尤其体现在IE浏览器里面: 大数据量时,加载后,操作很不流畅,勾选慢,sin

jQuery EasyUI Datagrid VirtualScrollView视图简单分析

大家都知道EasyUI的Datagrid组件在加载大数据量时的优势并不是很明显,相对于其他一些框架,如果数据量达到几千,便会比较慢,特别是在IE下面.针对这种情况,我们首要做的是要相办法优化datagrid组件的各方面性能,不过任何事情都是可以变通解决的,virtualScrollView就是一种不错的解决方案. virtualScrollView的准则就是尽量少画tr到table里,表格的高度是有限的,而用户的可见区域是很有限的,所以数据量很大的时候,是没有必要将所有数据数据都画到表格中,这样