您的位置：首页 > 产品设计 > UI/UE

EasyUI基础Draggable(拖)

2015-07-30 13:57 453 查看
学前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的事件还是比較好理解的，详细例如以下:

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

方法

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

使用方式

两种使用的方式:

通过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!
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航