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

最新推荐文章于 2024-05-23 04:55:12 发布

我想我是人

最新推荐文章于 2024-05-23 04:55:12 发布

阅读量807

点赞数 1

分类专栏： Web编程 easyui 文章标签： easyui web

本文链接：https://blog.csdn.net/redeg/article/details/54863941

版权

Web编程同时被 2 个专栏收录

29 篇文章 0 订阅

订阅专栏

easyui

26 篇文章 1 订阅

订阅专栏

    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
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【连载】研究EasyUI系统—Draggable组件

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

扫一扫

专栏目录