及 这 些 对 象 之 间 的 关 系 。Ｄ Ｏ Ｍ 基 本 操 作 的例 子 是 函 数 ｄ ｏ ｃ ｕ — 素允许拖拽的区间限制在 网页可视区 。网页 元素 的绝对定位时
拖拽功 能涉 及到其他 的操作 ， 如获取 可视化 区域 高度 ， 宽度等
可参考＿ ｌ Ｊ 。
可视 区的上边距的最小距离为 ０ ，最大距离为 网页可视区 的高
（ 吉首大学张家界 学院 湖南 张家界 ４ ２ ７ ０ ０ ０ ）
【 摘 要】 拖拽功能是 网页 设 计用户体验非 常重要的功能。 因此 ， 掌握拖拽 功能的实现原理 ， 提 高用户体验质 量。 本文
以Ｊ ａ ｖ ａ Ｓ ｃ ｉ ｆ ｐ ｔ 为编程语 言， 详 细 介 绍 了 实现 拖 拽 功 能 的基 础 知 识 、 实现 原 理 ， 以及 相 应 的优 化 措 施 ， 为 应 用拖 拽 功 能 提 供
度度与 网页元素高度之差 。 ４拖拽功能的实现 实现 网页元素的拖拽功 能包 含两个步骤 ： 首先以 Ｄ Ｉ Ｖ作为 网页元素； 其次 ， 根据基础知识实现 鼠标事件响应函数。代码片
段 １ 表 示 网页 元素 的 ＨＴ Ｍ Ｌ结 构 。
＜ ｄ ｉ ｖ ｃ ｌ ａ ｓ ｓ ＝ ” ｕ ｉ － ｄ ｉ ａ ｌ ｏ ｇ ”ｉ ｄ ＝ ” ｄ ｉ ａ ｌ ｏ ｇ ” ＞ ＜ ／ ｄ ｉ ｖ ＞
ｄ ｏ ｗ ｎ ， ｆ ｕ ｎ ｃ ｔ ｉ ｏ ｎ （ ｅ ） ｛
ｖ ａ ｔ ｅ ｅ ｌ ｌ ｗ ｉ ｎ ｄ ｗ． ｅ ｖ ｅ ｎ ｔ ；
ｍ ｏ ｕ ｓ ｅ Ｏ ｆ ｓ ｅ ｔ Ｘ ：ｅ ． ｐ ａ ｇ ｅ Ｘ —ｇ （ ＇ ｄ ｉ ａ ｌ ｏ ｇ ＇ ） ． ｏ ｆ ｓ ｅ ｔ Ｌ ｅ ｌ ｆ ； ｍ ｏ ｕ ｓ ｅ Ｏ ｆ ｆ ｓ ｅ ｔ Ｙ ＝ｅ ． ｐ ａ ｇ ｅ Ｙ＝ｇ （ ＇ ｄ ｉ ｌ ａ ｏ ｇ ＇ ） ． ｏ ｆ ｓ ｅ ｔ Ｔ ｏ ｐ ；
纵 坐 标 为 。而 与 的距 离 ， 表 示 网 页元 素 的偏 移 距 离 。 具体如 图 １
所示：
代码 片段 ２利用 Ｊ ａ ｖ ａ Ｓ ｅ ｉ ｆ ｐ ｔ 实 现 鼠标 事件 的相应 函数 ， 完
成拖拽功能。
ｄ ｏ ｃ ｕ ｍ ｅ ｎ ｔ ． ｇ ｅ ｔ Ｅ ｌ ｅ ｍｅ ｎ ｔ Ｂ ｙ ｌ ｄ（ ｄ ｉ ａ ｌ ｏ ｇ ＇ ） ． ａ ｄ ｄ Ｅ ｖ ｅ ｎ ｔ Ｌ ｉ ｓ ｔ ｅ ｎ ｅ ｒ （ ｍｏ ｕ ｓ ｅ —
１相 关 的 基础 知识
在拖拽之前 ， 网页元 素与网页可视区具有一 定的左边距和
上边距 。 在 此 不 妨 设 左边 距 为， 上 边距 为 ； 当 鼠标 移 动 后 ， 鼠标 改
变 的距离 ， 即为 网页元素移动距 离。因此 ， 移动后 网页元素与 网 页可视区的左 边距 为； 网页元素与 网页可视区 的上边距为。 松开 鼠标后 ， 将拖拽标记为否 。不再重新计算距离 。 ３拖拽功能的优化 在 实 现 网页 元 素 拖 拽 功 能 过 程 中 ， 存 在 以下 需 要 优 化 的 问
响应事件 即当用户通 过键盘或者 鼠标 改变 网页 元素 的状 态 时， 程序给予 的反馈。在拖拽功能中， 涉及到 的事件包含 鼠标 点击 、 鼠标移动、 释放 鼠标 。以鼠标按下事件 为例 ， 具体 的响应 函数为 ｏ ｎ ｍ ｏ ｕ ｓ ｅ ｄ ｏ ｗ ｎ ， 其他的响应函数 具体可参考阁 。 ２拖拽功能的实现原理 拖拽过 程涉 及到三 个操 作 ： 按下 鼠标 、 移 动 鼠标 、 松 开 鼠 标 。具体来说 ， 当用 户按下 鼠标的时候， 记录 当时鼠标 的位 置 ， 不妨设为 ， 其中， 横坐标为 ， 纵坐标 为， 开始执行拖拽功 能； 移动 鼠标后 ， 鼠标会重新得到一个 新位置 ， 不妨 设为， 其中横坐标为 ，
题： 限 制拖 拽 区 间 。 ３ ． １限制 拖 拽 区 间
在 网页元素 的拖拽功能实现过程 中， 涉及到关键 的知识 有 两个方面 ： 第一， 网页元素的相关操作 ， 即Ｄ Ｏ Ｍ。第二 ， 事件 的 响应函数 。 所谓 Ｄ Ｏ Ｍ 是表 示和处理一个 Ｈ Ｔ ＭＬ的常用方法 ， 它 定义 了表示和修改文档所需的对象 、 这些对 象的行为和属性 以
： 一 一
Ｄ Ｏ Ｉ ： １ ０ ． １ ６ ７ ０ ７ ￣ ． ｅ ｎ ｋ ｉ ． ｆ ｊ ｐ ｃ ． ２ ０ １ ７ ． ０ ２ ． ０ ６ ７
堕
ＵＪｌ ＡＮ ＣＯ Ｍ ＰＵ下ｇＲ
基于 Ｊ ａ ｖ ａ Ｓ ｃ ｒ ｉ ｐ ｔ 的 网页 元 素 拖 拽 功 能 的 实现
戚利 娜
验， 如允许用 户对 网页 元素 调整 网页 位置 ， 以满 足用户 的个性 化需求 。此类功能称为拖拽功能 。拖拽功能的应用范围较为广 泛， 如在 Ｔ ａ ｂ选项 卡， 可通过拖拽 功能将选 项按用户 的喜爱程 度排序 。总之 ， 在 目前 的网页设计中， 拖拽功能在用户体验方面 是非常重要 的功能 。而 Ｊ ａ ｖ ａ Ｓ ｃ ｉ ｆ ｐ ｔ 是实现网页前端动态效果 的 常 用脚 本 。因此 ， 本文 将利用 Ｊ ａ ｖ ａ Ｓ ｃ ｒ ｉ ｐ ｔ ， 从拖拽 的基本 原理 入 手， 实现拖拽功 能。
ｍ ｅ ｎ ｔ ． ｇ ｅ ｔ Ｅ ｌ ｅ ｍｅ ｎ ｔ Ｂ ｙ Ｉ ｄ （ ｉ ｄ ） ， 该 函数通过 Ｉ Ｄ标 识 符 获 取 网 页 元 素 。
在拖拽 网页元素过程 中， 没有考虑到 网页元 素可能会被拖 拽 出网页可视 区， 从而影响用户的体验 。因此有必要 对网页元 距离 网页可视区左边 的最小距离为 ０ ，最大距离为网页可视区 的宽度与网页元素 宽度之差 。网页 元素 的绝对定位时距离 网页
借鉴 。
【 关键词 ］ Ｊ ａ ｖ ａ Ｓ ｃ ｒ ｉ ｐ ｔ ； ￣
０引 言
ｉ ｆ ｅ
网页元素的定位采 取绝对 定位方式 ， 所 谓绝对 定位 ， 在 上 述 案 例 中 ， 即 网 页 元 素 以 网 页 可 视 区 的 左 上 角 为 原 点进 行 定
位。
目前 网 页 设 计 不 仅 要 求 网 页 结 构 合 理 ， 更 重 视 用 户 的 体