HTML5拖放交互入门

在当今网页设计与制作中，人机交互扮演着关键角色。网页最先吸引用户的往往不是内容，而是界面的视觉效果。就像人际交往，第一印象至关重要，只有外观令人舒适，用户才会愿意深入了解其内在功能与信息，否则再优秀的内容也可能被忽视。

1、 网页元素可拖拽操作

2、 网页中的元素位置大多固定，用户虽能通过点击或输入与之互动，但交互方式相对有限，缺乏更丰富的动态体验。

3、 HTML5实现了网页元素的自由拖放功能，类似于操作系统中将图片拖入文件夹的操作。实现这一功能需掌握几个关键概念，为网页交互提供了更直观的操作方式。

4、 拖放操作包含两个交互对象。

5、 图片为拖动主体

6、 接收方：文件夹

7、 拖拽时触发的各类操作事件

8、 图片拖入文件夹、悬停、移出及释放的交互过程。

9、 数据传输过程

10、 图片拖动过程中，其坐标持续动态更新。

11、 图片由文件夹外部移入内部，导致目录内容数据发生变化。

12、 将称为源对象，称为目标对象。

13、 可拖拽元素

14、 在HTML5中，只需设置属性即可让元素支持拖动功能。

15、 只需在任意元素中添加上述代码中的加粗标记即可实现。

16、 源对象开始拖拽时触发的事件

17、 此事关键在于处理好两件主要事务。

18、 配置需传输至目标的数据内容

19、 当需移动源对象时，应先记录其初始坐标位置，可参考桌面拖拽操作中源对象保持不动的现象。

20、 示例代码如下（基于jQuery）：

21、 jQuery实现数据传递

22、 JS传输数据

23、 }

24、 源对象的拖拽事件触发

25、 此事件多用于需要获取源对象坐标的情形，例如开发射击类游戏时。一般情况下，普通应用无需特别处理该事件。

26、 示例代码如下，使用 jQuery 实现功能

27、 编写实现代码

28、 });

29、 源对象拖拽结束时触发的事件

30、 此事无需关注，拖动结束后若位于目标对象上，自有其 ondrop 事件处理；若未落在目标对象上，则拖动无效，自然无需理会。

31、 目标元素触发拖拽进入事件时的处理

32、 该事件通常无需实现具体功能，因可能存在误触发情况，初始进入时即执行操作会影响效率。建议将相关处理逻辑移至ondragover事件中，可提升执行效率，避免不必要的资源消耗，使拖拽交互更加流畅合理。

33、 目标元素在拖拽悬停时触发的事件

34、 当拖动对象停留片刻后，可判定其为目标元素，此时触发特定效果，以实现预期功能与交互体验的优化。

35、 实现鼠标松开后的预览功能，帮助用户判断是否确认释放。

36、 显示隐藏信息以进一步判断是否需要释放。

37、 使目录对象具备接收能力。

38、 示例代码如下，基于 jQuery 实现功能。

39、 默认情况下元素不能嵌套，需阻止其默认行为以实现放置。

40、 });

41、 当拖拽离开目标元素时触发的事件

42、 该事件主要用于恢复在ondragover事件中设置的视觉效果。若未定义ondragover操作，则一般无需处理此事件，因其作用依赖于前者的存在与执行。

43、 目标元素的拖放释放事件

44、 该事件用于在目标对象上松开鼠标时执行相应操作，若未定义此事件，页面的拖拽功能将无法实现，失去实际意义。

45、 示例代码如下，使用 jQuery 实现功能。

46、 jQuery实现数据传递

47、 JS传输数据

48、 });