EasyUI学习笔记(七)——Draggable 可拖动

最新推荐文章于 2024-05-18 00:08:28 发布

小白code

最新推荐文章于 2024-05-18 00:08:28 发布

阅读量3.2k

点赞数

分类专栏：学习日记 hd 前端开发文章标签： easyui 布局插件

本文链接：https://blog.csdn.net/u012369153/article/details/53506106

版权

学习日记同时被 3 个专栏收录

26 篇文章 1 订阅

订阅专栏

23 篇文章 0 订阅

订阅专栏

前端开发

11 篇文章 0 订阅

订阅专栏

EasyUI体系结构：

EasyUI所有的插件主要分为六大部分：
- Base基础
- Layout布局
- Menu&Button
- Form表单
- Window窗口

Base部分包含了八个基础插件分别为:
- parser(解析器)
- easyloader(加载器)
- draggable(拖动)
- droppable(放置)
- resizable(大小调整)
- pagination(分页)
- progressbar(进度条)
- searchbox(搜索框)

前面学习了easyui基础的解析器,加载器。现在学习Draggable（可拖动）。

Draggable是什么：

实现拖拽功能的插件，利用它可以实现控件的拖拽效果。

用法

使用标记创建可拖动draggable 的元素

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

使用JavaScript创建可拖动 draggable的元素

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

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

属性：

名称	类型	描述	默认值
proxy 代理	string,function	在拖动过程中会被使用到的一个代理元素,当设置为‘clone’,一个clone的元素作为代理对象使用，如果定义的是一个函数,该函数必须返回一个jQuery对象(见如何创建代理对象）	null
revert 恢复	boolean	如果设置为true,当拖动结束后,该元素将回到开始的位置	false
cursor 光标	string	拖动时的 css 光标	move
deltaX x轴位置	number	拖动的元素相对于当前光标的 X 轴位置	null
deltaY Y轴位置	number	拖动的元素相对于当前光标的 Y 轴位置	null
handle 处理	select	启动可拖动（draggable）的处理（handle）	null
disable 停止拖动	boolean	设置为true，则停止可拖动	false
edge 宽度	number	能够在其中开始可拖动（draggable）的拖动宽度	0
axis	string	定义拖动元素可在其上移动的轴，可用的值是 ‘v’ 或 ‘h’，当设为 null，将会沿着 ‘v’ 和 ‘h’ 的方向移动	null

创建一个简单的代理对象

$('dragitem').draggable({
      proxy:function(source){
       var p = $('<div style="border:1px solid=#ccc;width:80px"></div>');
       p.html($(source).html()).appendTo('body');
       return p;
}
});

事件：

名称	参数	描述
onBeforeDrag	e	拖动前触发，返回 false 就取消拖动
onStartDrag	e	目标对象开始拖动时触发
onDrag	e	拖动期间触发。返回 false 将不进行实际的拖动
onStopDrag	e	拖动停止时触发

示例：

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title>EasyUI Draggable 测试Demo </title>

        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.5/themes/metro/easyui.css">  
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.5/themes/icon.css">  
        <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/jquery-easyui-1.5/demo/demo.css">  
        <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/jquery.min.js"></script>  
        <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-easyui-1.5/jquery.easyui.min.js"></script>  

        <script type="text/javascript">
            $(function () {
                $("#title").draggable({
                    proxy:function(a){
                        var a = $('<div class="proxy_div>"你拖俺做啥</div>');
                         a.appendTo('body');  
                         return a;
                    },
                    cursor: 'pointer',  
                    edge: '6'  
                });
            });
        </script>

    </head>
<body>
    <h2>Draggable Demo </h2>
    <div id="dd" class="easyui-draggble" 
        data-options="handle:'#title'"
        style="width: 100px;height: 100px;" >

    <div id="title" style="background: #ccc;width: 100px;height: 100px;"> 我是在容器里的！</div>

    </div>



</body>
</html>