jquery - 使用 jquery 的鼠标事件

Question

在文件上传过程中工作的拖放功能。我需要显示一些帮助消息以了解在 gmail 中拖动文件时的文件放置区域。谁能帮我做到这一点？

Answer 1

您的问题并未表明您的拖放功能是如何实现的。如果您使用 jquery ui 拖放，则可以在触发“drop”事件时添加您设想的消息。您可以在创建选择器或稍后绑定您的方法时指定“删除”之后必须发生的事情。以下是基于 jquery 文档的示例：

下降（事件，用户界面）类型：下降

当接受的可拖动对象放置在可放置对象上时触发（基于容差选项）。

事件类型：事件 ui 类型：对象

draggable 类型： jQuery 表示可拖动元素的 jQuery 对象。

helper 类型： jQuery 一个 jQuery 对象，表示正在拖动的助手。

position 类型： Object 可拖动助手的当前 CSS 位置为 { top, left } 对象。

offset 类型： Object 可拖动助手的当前偏移位置为 { top, left } 对象。

代码示例：

使用指定的 drop 回调初始化 droppable：

$( ".selector" ).droppable({ drop: function( event, ui ) {} //把你的消息代码放在这里 });

将事件侦听器绑定到 drop 事件：

$( ".selector" ).on( "drop", function( event, ui ) { //把你的消息代码放在这里} );

来源： http ://api.jqueryui.com/droppable/#event-drop

如果您想在拖动开始、停止或拖动期间响应“拖动”事件并插入一条消息，请按照此文档将“拖动”事件句柄绑定到您的选择器：

拖动（事件，用户界面）

类型：拖动

在拖动过程中移动鼠标时触发。

事件类型：事件

ui 类型：对象助手

类型： jQuery 表示正在拖动的助手的 jQuery 对象。

position 类型： Object 助手的当前 CSS 位置为 { top, left } 对象。

offsetType: Object 助手的当前偏移位置为 { top, left } 对象。

代码示例：使用指定的拖动回调初始化可拖动对象：

$( ".selector" ).draggable({ drag: function( event, ui ) { //把你的消息代码放在这里}} });

将事件侦听器绑定到拖动事件：

$( ".selector" ).on( "drag", function( event, ui ) { //把你的消息代码放在这里>}} );

---

开始（事件，用户界面）

类型：拖动启动

拖动开始时触发。

事件类型：事件

用户界面类型：对象

helper 类型： jQuery 表示正在拖动的助手的 jQuery 对象。

position 类型： Object 助手的当前 CSS 位置为 { top, left } 对象。

offset 类型： Object 助手的当前偏移位置为 { top, left } 对象。

代码示例：

使用指定的启动回调初始化可拖动对象：

$( ".selector" ).draggable({ start: function( event, ui ) { //把你的消息代码放在这里}} });

将事件侦听器绑定到 dragstart 事件：

1 $( ".selector" ).on( "dragstart", function( event, ui ) { //把你的消息代码放在这里}} );

---

停止（事件，用户界面）

类型：拖动停止

拖动停止时触发。

事件类型：事件

用户界面类型：对象

helper 类型： jQuery 表示正在拖动的助手的 jQuery 对象。

position 类型： Object 助手的当前 CSS 位置为 { top, left } 对象。

offset 类型： Object 助手的当前偏移位置为 { top, left } 对象。

代码示例：

使用指定的停止回调初始化可拖动对象：

$( ".selector" ).draggable({ stop: function( event, ui ) { //把你的消息代码放在这里}} });

将事件侦听器绑定到 dragstop 事件：

$( ".selector" ).on( "dragstop", function( event, ui ) { //把你的消息代码放在这里}} );