EasyUI基础Draggable(拖)

学前easyui基于解析器,装载机。对他们来说，入门阶段，我们只需要在这一个简单的了解，第一阶段，不宜过深后，。

接着，根据easyui排列官方网站为了学习文件Draggable小工具。

Draggable是什么

Draggable是easyui中用于实现拖拽功能的一个插件。利用它，我们能够实现控件的拖拽效果。

Draggble覆盖默认值$.fn.draggable.defaults。

Draggable

以下看看官网对于Draggable的描写叙述吧。

属性

其属性例如以下表所看到的:

名称	类型	描写叙述	默认值
proxy	string,function	在拖动过程中会被使用到的一个代理元素,当设置为‘clone’,一个clone的元素作为代理对象使用，假设定义的是一个函数,该函数必须返回一个JQuery对象,以下展示怎样创建一个简单的代理对象. $('dragitem').draggable({ proxy:function(source){ var p = $('<div style="border:1px solid=#ccc;width:80px"></div>'); p.html($(source).html()).appendTo('body'); return p; } });	null
revert	boolean	假设设置为true,当拖动结束后,该元素将回到開始的位置	false
cursor	string	当拖动的时候,一个css cursor(鼠标的样式),这里须要说明的是easyui的鼠标样式有很多比如：等待状态、help、手型等等。其cursor属性的值和w3c相应。后面我将给出cursor具有哪些可选值。	move
deltaX	number	拖动元素位置x相应当前光标	null
deltaY	number	拖动元素位置y相应当前光标	null
handle	selector	能够被拖动元素的选择器	null
disabled	boolean	true停止拖拽	false
edge	number	拖动的宽度，距离边缘多少能够被拖动()	0
axis	string	定义一个拖动元素拖动的轴,能够是'v'或者'h',当设置为 null时,能够水平或垂直方向随意拖动	null

上面表格中有一个很有意思的属性"cursor",表示为拖动元素时鼠标的样式,只是其值域是什么呢?

事实上W3C已经定义好了,详细cursor可选的值能够參考例如以下链接：http://www.w3school.com.cn/tiy/t.asp?f=csse_cursor

一个简单的样例,代码例如以下:

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Basic Draggable - jQuery EasyUI Demo</title>

    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/metro/easyui.css">

    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/themes/icon.css">

    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.6/demo/demo.css">

    <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.min.js"></script>

    <script type="text/javascript" src="jquery-easyui-1.3.6/jquery.easyui.min.js"></script>

</head>

<body>

    <h2>Basic Draggable</h2>

    <p>Move the boxes below by clicking on it with mouse.</p>

    <div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">

        <div id="title" style="background:#ccc;width:100px;height:100px;">容器里面的内容</div>

    </div>

    <script>

        $(function () {

            $("#title").draggable({

                proxy: function (a) {

                    var a = $('<div class="proxy_div">你拖我干啥</div>');

                    a.appendTo('body');

                    return a;

                },

                cursor: 'pointer',

                edge: '6'

            });

        });

    </script>

</body>

</html>

上述代码的效果图须要说明的是:这里因为截图焦点不再页面上了。手型的光标看不见了。事实上光标在"你拖我干啥"上面。这也间接的说明了proxy属性为function时的效果。至于其它鼠标css，读者能够自行尝试。

事件

Draggable的事件还是比較好理解的，详细例如以下:

名称	參数	描写叙述信息
onBeforeDrag	e	拖动之前触发,返回false则取消拖拽动作
onStartDrag	e	目标对象開始拖动时触发
onDrag	e	拖动期间触发
onStopDrag	e	当拖动结束的时候触发

方法

名称	參数	描写叙述信息
options	none	返回options属性
proxy	none	假设proxy属性已经设置,则返回代理对象
enable	none	启动拖动动作
disable	none	禁用拖动动作

使用方式

两种使用的方式:

通过html标记创建,方法例如以下:

<div id="dd" class="easyui-draggable" data-options="handle:'#title'" style="width:100px;height:100px;">

        <div id="title" style="background:#ccc;width:100px;height:100px;">容器里面的内容</div>

 </div>

2. 通过js脚本创建:

<div id="dd" style="width:100px;height:100px;">

    <div id="title" style="background:#ccc;">title</div>

</div>

<script>

    $('#dd').draggable({

        handle: '#title'

    });

</script>

Demo

对于Draggable。官网提供了一些个样例地址例如以下:http://www.jeasyui.com/demo/main/index.php?plugin=Draggable&theme=default&dir=ltr&pitem=

初学者的话,上述demo样品是足够。

over!

EasyUI基础Draggable(拖)的更多相关文章

EasyUI基础入门之Parser(解析器)
前言 JQuery EasyUI提供的组件包含功能强大的DataGrid,TreeGrid.面板.下拉组合等.用户能够组合使用这些组件,也能够单独使用当中一个.(使用的形式是以插件的方式提供的) Ea ...
第一百九十三节，jQuery EasyUI，Draggable(拖动)组件
Draggable(拖动)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其他组 ...
easyui树节点拖拽排序的存储过程
easyui树的拖拽排序功能 easyui树中有拖拽功能树结构如下: 一个行政区域对应一个单位,一个单位对应多个部门,每个部门下有相关人员,功能要求: (1)行政区域没有子节点,点击text加载部门 ...
EasyUI基础知识Draggable(拖累)
学习前easyui基于解析器,装载机.对他们来说,入门阶段,我们只需要在一个简单的理解.第一阶段,不宜过深后,.接着,根据easyui订购的文件正在研究安排官方网站Draggable插入. Dragg ...
easyui datagrid 列拖拽
首先easyui 它有提供了拖拽的功能Draggable,那我们就可以想拖拽标题头到另外的标题头上面我们就对datagrid的columns重新绑定一次并刷新datagrid这个功能不就行了? & ...
EasyUI基础入门之Easyloader(载入器)
在了解完easyui的parser(解析器)之后,接下来就是easyloader(简单载入器)的学习了. 什么是EasyLoader 正如其名字一样easyloader的作用是为了动态的载入组件所需的 ...
EasyUi基础学习(一)—基本组件(上)
一.概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者不需要编写复 ...
EasyUI基础入门之Droppable(可投掷)
怎么说呢Droppable这个单词究竟是什么意思,准确来说easyui作者究竟要表达什么意思,还是不大好拿捏的.只是没关系,没有必要纠结与这些细枝末节的东西,依据官网的demo效果,就简单的将之定义为 ...
EasyUI基础入门之Resiable(可缩放)
easyui的base插件学习已经进行到Resizable(可缩放)了.照旧看看easyui官网的API. Resiable 正如其字面意思一样(可伸缩),resiable主要是将一些html元素扩展 ...

随机推荐

win32中SetCapture 和 ReleaseCapture的使用（查一下在VCL中的使用）
最近在用win32写<visual C++经典游戏程序设计>中的扫雷游戏,在写到鼠标点击雷区的时候用到了SetCapture,和ReleaseCapture这对系统函数. 那么为什么需要用 ...
根据PID获取进程名&根据进程名获取PID
Liunx中通过进程名查找进程PID可以通过 pidof [进程名] 来查找.反过来 ,相同通过PID查找进程名则没有相关命令.在linux根目录中,有一个/proc的VFS(虚拟文件系统),系统当 ...
gdb查看线程堆栈信息
查看堆栈:gdb -quiet -batch -ex='thread apply all bt' -p pid查看运行位置:gdb -quiet -batch -ex='thread apply al ...
JavaScript对象的创建
原文简书原文:https://www.jianshu.com/p/6cb1e7b7e379 大纲前言 1.简单方式创建对象的方法 2.工厂模式创建对象 3.构造函数模式创建对象 4.原型模式创建对 ...
HDU 1010 Tempter of the Bone (ZOJ 2110) DFS+剪枝
传送门: HDU:http://acm.hdu.edu.cn/showproblem.php?pid=1010 ZOJ:http://acm.zju.edu.cn/onlinejudge/showPr ...
《SAS编程与数据挖掘商业案例》学习笔记之十二
本次重点在:sas数据集管理主要包含:包含数据集纵向拼接.转置.排序.比較.复制.重命名.删除等 1.append语句注:base数据集和data两个数据集必须结构一样.避免使用force的情况, ...
mysql分区功能（三个文件储存一张表）（分区作用）（分区方式）
mysql分区功能(三个文件储存一张表)(分区作用)(分区方式) 一.总结 1.mysql数据表的存储方式(三个文件储存一张表): 一张表主要对应着三个文件,一个是frm存放表结构的,一个是myd存放 ...
[Git] How to rename your remote branch
Rename your local foo branch with bar: git branch -m foo bar Remember this will add the new branch w ...
Android bitmap绘制文字自动换行
public Bitmap getNewBitMap(String text) { Bitmap newBitmap = Bitmap.createBitmap(,, Config.ARGB_4444 ...
【codeforces 546B】Soldier and Badges
time limit per test3 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...