From 930c19e4ad9009f5117bdda60d7f56c07a85df2f Mon Sep 17 00:00:00 2001 From: LeviDing Date: Sun, 29 Mar 2020 15:09:00 +0800 Subject: [PATCH 01/37] Update article.md --- 2-ui/3-event-details/4-mouse-drag-and-drop/article.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md index 65622e8256..32f16d9d97 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md +++ b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md @@ -1,8 +1,8 @@ -# 拖放鼠标事件 +# 鼠标拖放事件 -拖放是一个很好的界面解决方案。从复制和移动（参考文件管理）到排序（放入购物车），拖放是一种简洁明了的方法。 +拖放是一个很赞的界面解决方案。取某件东西并将其拖放是执行许多东西的一种简单明了的方式，从复制和移动文档（如在文件管理器中）到订购（将物品放入购物车）。 -在现代 HTML 标准中，有一个[拖动事件的部分](https://html.spec.whatwg.org/multipage/interaction.html#dnd)。 +在现代 HTML 标准中有一个 [关于拖放的部分](https://html.spec.whatwg.org/multipage/interaction.html#dnd)，其中包含了例如 `dragstart` 和 `dragend` 等特殊事件。 这很有趣，因为它们允许轻松地解决一些简单的任务，而且允许处理“外部”文件拖放到浏览器中的事件。因此我们可以在 OS 文件管理中获取文件，并将其拖动到浏览器窗口。然后 JavaScript 获取对其内容的访问权限。 From e747e77733912dc65ddcf179beb0cbeaefd53f8b Mon Sep 17 00:00:00 2001 From: LeviDing Date: Sun, 29 Mar 2020 20:26:38 +0800 Subject: [PATCH 02/37] Update article.md --- .../4-mouse-drag-and-drop/article.md | 49 ++++++++++--------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md index 32f16d9d97..0ee22424e9 100644 --- a/2-ui/3-event-details/4-mouse-drag-and-drop/article.md +++ b/2-ui/3-event-details/4-mouse-drag-and-drop/article.md @@ -1,27 +1,26 @@ # 鼠标拖放事件 -拖放是一个很赞的界面解决方案。取某件东西并将其拖放是执行许多东西的一种简单明了的方式，从复制和移动文档（如在文件管理器中）到订购（将物品放入购物车）。 +拖放（Drag'n'Drop）是一个很赞的界面解决方案。取某件东西并将其拖放是执行许多东西的一种简单明了的方式，从复制和移动文档（如在文件管理器中）到订购（将物品放入购物车）。 在现代 HTML 标准中有一个 [关于拖放的部分](https://html.spec.whatwg.org/multipage/interaction.html#dnd)，其中包含了例如 `dragstart` 和 `dragend` 等特殊事件。 -这很有趣，因为它们允许轻松地解决一些简单的任务，而且允许处理“外部”文件拖放到浏览器中的事件。因此我们可以在 OS 文件管理中获取文件，并将其拖动到浏览器窗口。然后 JavaScript 获取对其内容的访问权限。 +这些事件很有用，因为它们使我们能够轻松地解决简单的任务。例如，使我们能够处理将“外部”文件拖放到浏览器中的操作，因此我们可以在 OS 文件管理器中获取文件，并将其拖放到浏览器窗口中，从而使 JavaScript 可以访问其内容。 -但是本地的拖动事件总是有局限性。比如，我们可以把拖动范围限制在某个区域内。而且我们也可以把它变成 "horizontal" 或 "vertical"。还有其他的拖放任务无法通过使用 API 实现。 +但是，原声的拖放事件也有其局限性。例如，我们无法将拖放限制在某个区域内。并且，我们无法将拖放变成“水平”或“垂直”拖放。还有其他一些使用该 API 无法完成的拖放任务。此外，移动设备基本都不支持此事件。 -在这里，我们将看到如何使用鼠标事件实现拖放。并不难。 +因此，在这里我们将看到，如何使用鼠标事件来实现拖放。 ## 拖放算法 -拖放基础算法就像这样： +基础的拖放算法如下所示： -1. 在可拖动元素上捕获 `mousedown` 事件。 -2. 准备要移动的元素（可能创建它的副本或其他任何东西）。 -3. 然后在 `mousemove` 上，通过改变 `left/top` 和 `position:absolute` 来移动它。 -4. 在 `mouseup`（释放按钮）中 —— 执行所有完成拖放相关的动作。 +1. 在 `mousedown` 上 —— 根据需要准备要移动的元素（也许创建它的一个副本）。 +2. 然后在 `mousemove` 上，通过更改 `left/top` 和 `position:absolute` 来移动它。 +3. 在 `mouseup` 上 —— 执行与完成的拖放相关的所有行为。 -这些是基础。我们可以对其进行拓展，例如，当鼠标在可拖动元素上悬停时，高亮这个元素。 +这些是基础。稍后我们可以扩展它，例如，当鼠标悬停在元素上方时，突出显示可放置（可用于放置）的元素。 -这是拖放球的算法： +下面是拖放一个球的算法： ```js ball.onmousedown = function(event) { // (1) 启动进程 @@ -58,19 +57,19 @@ ball.onmousedown = function(event) { // (1) 启动进程 }; ``` -如果我们运行代码，我们会发现一些奇怪的事情。在拖放的一开始，球会 "forks"：我们开始拖动它的 "clone"。 +如果我们运行这段代码，我们会发现一些奇怪的事情。在拖放的一开始，球“分叉”了：我们开始拖动它的“克隆”。 ```online -这是一个动作实例： +这是一个正在运行中的示例： [iframe src="https://github.com/ball" height=230] -尝试拖放鼠标，你会看到奇怪的行为。 +尝试拖放鼠标，你会看到这种奇怪的行为。 ``` -这是因为浏览器有自己拖放图像功能和其他一些自动运行可能与我们的产生冲突的元素。 +这是因为浏览器有自己的对图片和一些其他元素的拖放处理，会在我们拖放时自动运行，这与我们的拖放处理产生了冲突。 -如果禁用： +禁用它： ```js ball.ondragstart = function() { @@ -78,30 +77,32 @@ ball.ondragstart = function() { }; ``` -现在一切都会好起来的。 +现在一切都正常了。 ```online -动作： +这是一个正在运行中的示例： [iframe src="https://github.com/ball2" height=230] ``` -另一个重要的方面是 —— 我们在 `document` 上跟踪 `mousemove`，而不是在 `ball` 上。第一眼看，鼠标似乎总是在球的上方，我们可以在上面放 `mousemove`。 +另一个重要的方面是 —— 我们在 `document` 上跟踪 `mousemove`，而不是在 `ball` 上。乍一看，鼠标似乎总是在球的上方，我们可以将 `mousemove` 放在球上。 -正如我们记得的那样，`mousemove` 会经常被触发，但不会针对每个像素都如此。因此在快速移动之后，光标可以从文档中心的某个地方（甚至是窗口外）从球上跳出来。 +但正如我们所记得的那样，`mousemove` 会经常被触发，但不会针对每个像素都如此。因此，在快速移动鼠标后，鼠标指针可能会从球上跳转至文档中间的某个位置（甚至跳转至窗口外）。 -因此为了捕获它，我们应该监听 `document`。 +因此，我们应该监听 `document` 以捕获它。 ## 修正定位 -在上述例子中，球总是以指针为中心的： +在上述示例中，球在移动时，球的中心始终位于鼠标指针下方： ```js ball.style.left = pageX - ball.offsetWidth / 2 + 'px'; ball.style.top = pageY - ball.offsetHeight / 2 + 'px'; ``` -不错，但这存在副作用。我们可以在球的任何地方使用 `mousedown` 来开始拖放。如果在边缘那么做，那么球就会突然“跳”到以指针为中心的位置。 +不错，但这存在副作用。要启动拖放，我们可以在球上的任意位置 `mousedown`。但是， + +我们可以在球的任何地方使用 `mousedown` 来开始拖放。如果在边缘那么做，那么球就会突然“跳”到以指针为中心的位置。 如果我们保持元素相对指针的初始位移，情况会更好。 @@ -186,7 +187,7 @@ In action (inside `