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

来源：互联网发布：做农村淘宝合伙人优势编辑：程序博客网时间：2024/05/29 16:36

    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组件的事件：

事件名称参数描述 onBeforeDrag e 拖动组件前触发。 onStartDrag e 开始拖动组件时触发。 onDrag e 组件正在拖动时触发。 onStopDrag e 停止拖动组件后触发。

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>

1 0