研究EasyUI系统—Draggable组件

    draggable组件在web上创建一个可以拖动的元素。用户可以拖动draggable组件到页面的任何位置。     我们通过制作一个简陋的便签贴展示一下draggable的用法和效果。先上图：     由于拖动是动态的过程，上图作为静态图不能很好地表现。在实际页面中，我们只要把鼠标放在便签贴顶部天蓝色区域（标题）中，就可拖动整个便签贴在web页面上移动。     接下来看一下上图的实现代码：

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

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

draggable组件的事件：

    draggable组件的事件也并不复杂。对于onBeforeDrag和onStartDrag而言，两者在时机上有细微的差别，onBeforeDrag是拖动前触发，是触发时间最早的组件；onStartDrag是开始拖动的一瞬间触发，时间略晚于onBeforeDrag。此外，onBeforeDrag是在代理属性（proxy）指定的方法执行前触发；onStartDrag则是代理属性指定的方法执行之后才触发。onDrag为拖动过程中执行；onStopDrag为拖动结束并松开鼠标后执行。四个事件的参数都一样，均为DOM中的Event对象。关于Event对象请参考HTML和JS相关资料。     下列代码实现了组件在拖动中动态显示屏幕坐标的功能。