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

【连载】研究EasyUI系统—Draggable组件

2017-02-04 16:24 441 查看
draggable组件在web上创建一个可以拖动的元素。用户可以拖动draggable组件到页面的任何位置。

我们通过制作一个简陋的便签贴展示一下draggable的用法和效果。先上图：



由于拖动是动态的过程，上图作为静态图不能很好地表现。在实际页面中，我们只要把鼠标放在便签贴顶部天蓝色区域（标题）中，就可拖动整个便签贴在web页面上移动。

接下来看一下上图的实现代码：

<html>
<head>
<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css"/>
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<style>
td.grid {
border-left: none;
border-right: none;
border-bottom: none;
border-top: 1px lightblue solid
}
.title {
background:lightblue;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
height: 50px;font-style: italic;
text-align: center;
line-height: 50px;
font-weight: bold;
font-size: 24px;
color: coral
}
</style>
</head>
<body>
<div id="note" class="easyui-draggable" style="width:300px;height:330px;border: 1px lightblue solid;border-radius: 5px;">
<div id="title" class="title">便 签 贴</div>
<div id="content">
<table style="width: 100%;height: 280px;border-collapse: collapse">
<tr><td class="grid"></td></tr>
<tr><td class="grid"></td></tr>
<tr><td class="grid"></td></tr>
<tr><td class="grid"></td></tr>
<tr><td class="grid"></td></tr>
<tr><td class="grid"></td></tr>
<tr><td class="grid"></td></tr>
</table>
</div>
</div>
<script>
$("#note").draggable({
handle:'#title'
});
</script>
</body>
</html>


id为note的div即为draggable，内部有id为title和content的两部分。title就是天蓝色的标题部分，content则是带有网格线的部分。我们在最后的js脚本中，handle属性指定可拖拽部分为“title”，这意味着我们能拖动标题部分，但不能拖动content部分。

draggable组件的属性：

属性名称属性值类型属性默认值描述
proxy字符串，方法null代理元素。
revert布尔值false如为true，当拖动停止时，控件将返回到拖动前的位置。
cursor字符串“move”拖动时光标样式。
deltaX数值null光标离组件水平边界的距离。
deltaY数值null光标离组件垂直边界的距离。
handle选择器null可拖动区域。
disabled布尔值false是否关闭拖动功能。
edge数值0可拖动区域的边界离整片区域的距离。
axis字符串null拖动方向。”v”仅为垂直拖动，”h”仅为水平拖动，设为null则两个方向均可拖动。
proxy属性用于组件的代理，他的参数由字符串和函数构成。proxy属性可以由几种值构成。如为“clone”字符串，组件将一个自身对象的“克隆”作为代理，从直观上看，当拖动组件时，原位置会继续保留一个一模一样的组件。如指定了function参数，那么需要在function中编写HTML及CSS等代码，达到用户自己想要的效果。下图为“clone”时的拖动效果。



revert属性如设为true,拖动停止并松开鼠标后，组件将回到被拖动前的位置。

cursor属性为鼠标进入到可拖拽区域后变成的样式，默认是可移动形状（move）。此处鼠标样式和CSS中的光标样式一致，可使用的值有“help”、“pointer”、“crosshair”、“text”、“wait”等等，具体可参见css资料。

deltaX和deltaY分别为拖动组件时，鼠标离组件左边界（deltaX）和上边界（deltaY）的距离，数值可为正数也可为负数。正数时，鼠标向左（向上）偏离；负数时，鼠标向右（向下）偏离。

handle指定可拖动部分，已在前面部分进行说明。

edge指定了实际可拖动区域和handle指定的可拖动区域之间的边距。假设edge值设为5，那么下图中阴影部分为实际可拖动区域，阴影部分各边界离handle指定的可拖动区域（整个天蓝色区域）各边界之间的距离为5像素。



draggable的方法和事件并不多，共4个方法和4个事件。

draggable组件的方法：

方法名称参数描述
options无返回所有属性。
proxy无返回自定义的代理属性。
enable无允许拖动组件。
disable无禁止拖动组件。
draggable组件的事件：

事件名称参数描述
onBeforeDrage拖动组件前触发。
onStartDrage开始拖动组件时触发。
onDrage组件正在拖动时触发。
onStopDrage停止拖动组件后触发。
draggable组件的事件也并不复杂。对于onBeforeDrag和onStartDrag而言，两者在时机上有细微的差别，onBeforeDrag是拖动前触发，是触发时间最早的组件；onStartDrag是开始拖动的一瞬间触发，时间略晚于onBeforeDrag。此外，onBeforeDrag是在代理属性（proxy）指定的方法执行前触发；onStartDrag则是代理属性指定的方法执行之后才触发。onDrag为拖动过程中执行；onStopDrag为拖动结束并松开鼠标后执行。四个事件的参数都一样，均为DOM中的Event对象。关于Event对象请参考HTML和JS相关资料。

下列代码实现了组件在拖动中动态显示屏幕坐标的功能。

<!-- id为pos的div显示动态坐标 -->
<div id="pos" style="width:200px;height:50px;border:1px solid black"></div>

<script>
$("#note").draggable({
onDrag:function(e) {
$("#pos").html("");
$("#pos").html("X: " + e.clientX + "  " + "Y: " + e.clientY);
}
});
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  easyui web
相关文章推荐
新的分享
章节导航