EasyUI基础入门之Draggable(拖拽)

最新推荐文章于 2021-07-09 08:47:04 发布

转载最新推荐文章于 2021-07-09 08:47:04 发布 · 121 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/LCore/blog/294645

文章标签：

#php #javascript #ViewUI

本文深入解析EasyUI Draggable插件的基本概念、属性、事件、方法及使用方式，并通过代码示例展示如何创建具有拖拽功能的元素。

为什么80%的码农都做不了架构师？>>>

前面学习了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>

上述代码的效果图 QQ截图20140529095009 需要说明的是:这里由于截图焦点不再页面上了，手型的光标看不见了。其实光标在"你拖我干啥"上面。这也间接的说明了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>