使用介绍,中文文档

用$.fn.draggable.defaults重写默认的defaults。
用法

jQuery EasyUI是一组基于jQuery的UI插件集合,而jQuery
EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对css样式有深入的了解,开发者需要了解的只有一些简单的html标签。

JQuery
UI提供的API极大简化了拖拽功能的开发。只需要分别在拖拽源(source)和目标(target)上调用draggable和droppable两个函数即可。

复制代码 代码如下:

图片 1 

拖拽原理
首先要明确几个概念。
  ource:拖拽源,要拖动的元素。
  taerget:拖放目标,能够放入source的容器。
拖拽的动作分解如下:
  1. drag start:在拖拽源(source)上按下鼠标并开始移动
  2. drag move: 移动过程中
  3. drag enter: 移动进入目标(target)容器
  4. drag leave: 移出目标(target)容器
  5. drop: 在目标(target)容器上释放鼠标
  6. drag end: 结束
在html5之前,页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。

<div id=”dd” style=”width:100px;height:100px;”>
<div id=”title” style=”background:#ccc;”>title</div>
</div>

 jQuery
EasyUI为我们提供了大多数UI控件的使用,如:accordion,combobox,menu,dialog,tabs,tree,window等等。

最简单的例子
最简单的拖拽是不改变元素所在的容器,而只改变其位置。例子如下:

复制代码 代码如下:

OK,下面就开始我们的初探之旅。
jQuery EasyUI—Accordion
手风琴效果,大家应该很熟悉。
基本代码:

复制代码 代码如下:

$(‘#dd’).draggable({
handle:’#title’
});

复制代码 代码如下:

<html>
<head></head>
<body>
<div id=”container”>
<div id=”dragsource”>
<p>拽我!</p>
</div>
</div><!– End container –>
<script type=”text/javascript”
src=”js/jquery-1.7.min.js”></script>
<script type=”text/javascript”
src=”js/jquery-ui-1.8.16.custom.min.js”></script>
<script>
$(function() {
$( “#dragsource” ).draggable();
})
</script>
</body>
</html>

特性

<html xmlns=”;
<head>
<title>Accordion</title>
<script src=”../jquery-1.4.2.min.js”
type=”text/javascript”></script>
<script src=”../jquery.easyui.min.js”
type=”text/javascript”></script>
<link href=”../themes/default/easyui.css” rel=”stylesheet”
type=”text/css” />
<link href=”../themes/icon.css” rel=”stylesheet” type=”text/css”
/>
<script type=”text/javascript”></script>
</head>
<body>
<div
style=”overflow:auto;width:600px;height:300px;padding:10px;border:1px
solid #ccc;”>
<div id=”aa” class=”easyui-accordion” fit=”true”
style=”width:300px;height:200px;”>
<div title=”Title1″ style=”overflow:auto;padding:10px;”>
<h3>Accordion1</h3>
</div>
<div title=”Title2″ style=”padding:10px;”>
<h3>Accordion2</h3>
</div>
<div title=”Title3″>
<h3>Accordion3</h3>
</div>
</div>
</div>
</body>
</html>

拖动到另一个容器
更常见的场景是将元素拖动到另一个容器中。这就需要在drop目标(target)容器上应用droppable函数。让我们在上一个例子的基础上,增加一个div作为容器,并应用droppable函数:

名称

类型

说明

默认值

proxy

string,function

拖拽时要使用的代理元素,设置为’clone’时,克隆元素将被用作代理。如果指定一个函数,它必须返回一个jQuery对象。

null

revert

boolean

如果设为true,拖拽结束后元素将返回它的开始位置。

false

cursor

string

拖拽时的css光标(cursor)。

move

deltaX

number

拖拽的元素相对于当前光标的位置的X。

null

deltaY

number

拖拽的元素相对于当前光标的位置的Y。

null

handle

selector

启动draggable的处理(handle)。

null

disabled

boolean

设为true就停止draggable。

false

edge

number

能够在其中开始draggable.的拖拽宽度。

0

axis

string

定义拖拽元素可在其上移动的轴,可用的值是’v’或’h’,当设为null,将会沿着’v’和’h’的方向移动。

null

代码非常简单,只需要简单的html就可以实现。这里最重要的就是首先要引用jquery-1.4.2.min.js和jquery.easyui.min.js。
效果:
图片 2
由于只是简单的html,所以我们可以通过js轻松的对Accordion进行操控,控制大小,位置等等。

复制代码 代码如下:

事件

jQuery EasyUI—DataGrid

<html>
<head></head>
<body>
<div id=”container”>
<div id=”dragsource”>
<p>拽我!</p>
</div>
</div><!– End container –>

名称

参数

说明

onBeforeDrag

e

拖拽前触发,返回false就取消拖拽。

onStartDrag

e

目标对象开始拖拽时触发。

onDrag

e

拖拽期间触发。返回false将不做真正的拖拽。

onStopDrag

e

拖拽停止时触发。

从名字就可以知道这是个数据的绑定和显示控件。

<div id=”droppalbe” style=”width:
300px;height:300px;background-color:gray”>
<p>Drop here</p>
</div>

方法

基本代码:

<script type=”text/javascript”
src=”js/jquery-1.7.min.js”></script>
<script type=”text/javascript”
src=”js/jquery-ui-1.8.16.custom.min.js”></script>
<script>
$(function() {
$( “#dragsource” ).draggable();
$( “#droppable” ).droppable();
})
</script>
</body>
</html>

名称

参数

描述

options

none

返回选项(options)属性(property)。

proxy

none

如果设置了代理(proxy)属性就返回代理(proxy)。

enable

none

启用拖拽动作。.

disable

none

禁用拖拽动作。

复制代码 代码如下:

事件监听和回显(Feedback)
运行上一个例子,你可能会产生疑惑,真的放到目标容器上了吗?用户也会产生同样的疑惑。所以,可以监听拖动过程中发生的一些事件,并用可见的方式让用户知道。这就叫做回显(Feedback)。

您可能感兴趣的文章:

  • jquery.ui.draggable中文文档(原文翻译)
  • 如何使用jQuery
    Draggable和Droppable实现拖拽功能
  • jQuery UI-Draggable
    参数集合
  • jquery.ui.draggable中文文档
  • jQuery EasyUI
    Draggable拖动组件

<html xmlns=”;
<head>
<title>DataGrid</title>
<meta http-equiv=”Content-Type” content=”text/html;
charset=UTF-8″>
<script src=”../jquery-1.4.2.min.js”
type=”text/javascript”></script>
<script src=”../jquery.easyui.min.js”
type=”text/javascript”></script>
<link href=”../themes/default/easyui.css” rel=”stylesheet”
type=”text/css” />
<link href=”../themes/icon.css” rel=”stylesheet” type=”text/css”
/>
<script type=”text/javascript”>
$(function() {
$(‘#test’).datagrid({
title: ‘jQuery EasyUI—DataGrid’,
iconCls: ‘icon-save’,
width: 500,
height: 350,
nowrap: false,
striped: true,
url: ‘../Data/datagrid_data.json’,
sortName: ‘ID’,
sortOrder: ‘desc’,
idField: ‘ID’,
frozenColumns: [[
{ field: ‘ck’, checkbox: true },
{ title: ‘ID’, field: ‘ID’, width: 80, sortable: true }
]],
columns: [[
{ title: ‘基本信息’, colspan: 2 },
{ field: ‘opt’, title: ‘操作’, width: 100, align: ‘center’, rowspan:
2,
formatter: function(value, rec) {
return ‘<span style=”color:red”>编辑 删除</span>’;
}
}
], [
{ field: ‘name’, title: ‘Name’, width: 120 },
{ field: ‘addr’, title: ‘Address’, width: 120, rowspan: 2, sortable:
true }
]],
pagination: true,
rownumbers: true,
singleSelect: false,
toolbar: [{
text: ‘添加’,
iconCls: ‘icon-add’,
handler: function() {
alert(‘添加数据’)
}
}, ‘-‘, {
text: ‘保存’,
iconCls: ‘icon-save’,
handler: function() {
alert(‘保存数据’)
}
}]
});
});
</script>
</head>
<body>
<table id=”test”></table>
</body>
</html>

对于源(source),可以监听的事件包括:

这里我们从datagrid_data.json中获取数据,代码的编写风格同EXTIS十分相似。ExtJS开发实践

  create: 在source上应用draggable函数时触发
  start:开始拖动时触发
  drap:拖动过程中触发
  stop:释放时触发
对于目标(target),可以监听的事件包括:
  create: 在target上应用droppable函数时触发
  activate:如果当前拖动的source可以drop到本target,则触发
  deactivate:如果可以drop到本target的拖拽停止,则触发
  over:source被拖动到target上面
  out:source被拖动离开target
  drop:source被释放到target
事件处理函数都是通过draggable和droppable函数的参数传递,在这些事件处理函数中就可以进行Feedback。看一下实际的例子:

效果:
图片 3 
jQuery EasyUI—Dialog
网页窗体效果。
基本代码:

复制代码 代码如下:

复制代码 代码如下:

<html>
<head>

<html xmlns=”;
<head>
<title>Dialog</title>
<script src=”../jquery-1.4.2.min.js”
type=”text/javascript”></script>
<script src=”../jquery.easyui.min.js”
type=”text/javascript”></script>
<link href=”../themes/default/easyui.css” rel=”stylesheet”
type=”text/css” />
<link href=”../themes/icon.css” rel=”stylesheet” type=”text/css”
/>
<script>
$(function(){
$(‘#dd’).dialog({
toolbar:[{
text:’添加’,
iconCls:’icon-add’,
handler:function(){
alert(‘添加数据’)
}
},’-‘,{
text:’保存’,
iconCls:’icon-save’,
handler:function(){
alert(‘保存数据’)
}
}],
buttons:[{
text:’提交’,
iconCls:’icon-ok’,
handler:function(){
alert(‘提交数据’);
}
},{
text:’取消’,
handler:function(){
$(‘#dd’).dialog(‘取消’);
}
}]
});
});
</script>
</head>
<body>
<div id=”dd” style=”padding:5px;width:400px;height:200px;”>
<p>jQuery EasyUI—Dialog</p>
</div>
</body>
</html>

</head>
<body>
<div id=”dragsource”>
<p id=”targetMsg”>:-|</p>
</div>

效果:
图片 4 
jQuery EasyUI—Tabs
无论是网站还是管理软件,我们越来越多的使用Tabs,EasyUI自然也进行了支持。
基本代码:

<div id=”droppable” style=”background-color:gray;height:300″>
<p>Can drop! </p>
</div>

复制代码 代码如下:

<script type=”text/javascript”
src=”js/jquery-1.7.min.js”></script>
<script type=”text/javascript”
src=”js/jquery-ui-1.8.16.custom.min.js”></script>
<script>
$(function() {
$( “#dragsource” ).draggable({
start: function(event,ui) {
$(this).find(“p”).html(“:-S”);
},
stop:function(event,ui){
$(this).find(“p”).html(“:-|”);
}
});

<html xmlns=”;
<head>
<title>Tabs</title>
<script src=”../jquery-1.4.2.min.js”
type=”text/javascript”></script>
<script src=”../jquery.easyui.min.js”
type=”text/javascript”></script>
<link href=”../themes/default/easyui.css” rel=”stylesheet”
type=”text/css” />
<link href=”../themes/icon.css” rel=”stylesheet” type=”text/css”
/>
</head>
<body>
<div id=”tt” class=”easyui-tabs”
style=”width:500px;height:250px;”>
<div title=”Tab1″ style=”padding:20px;display:none;”>
<h1>Tab1 Content</h1>
</div>
<div title=”Tab5″ closable=”true”
style=”padding:10px;display:none;”>
<div class=”easyui-tabs” fit=”true” plain=”true”
style=”height:100px;width:300px;”>
<div title=”Title1″>Content 1</div>
<div title=”Title2″>Content 2</div>
<div title=”Title3″>Content 3</div>
</div>
</div>
</div>
</body>
</html>

$( “#droppable” ).droppable({
activate: function(event,ui) {
$(this).find(“p”).html( “Drop here !” );
},
over: function(event,ui) {
$( this ).find( “p” ).html( “Oh, Yeah!” );