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

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

2016-12-07 16:18 239 查看

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： easyui 布局插件

相关文章推荐

新的分享

章节导航