简介
跌落事件是指元素从一个容器中跌落到另一个容器中的事件。在前端开发中，我们常常需要实现拖放功能来支持跌落事件。然而，在某些情况下，我们可能会发现在 Google Chrome 浏览器中无法触发跌落事件，本文将深入探讨这个问题。
背景
在 HTML5 标准被引入之前，实现拖放功能需要使用非标准的 API，例如 Internet Explorer 的 dragDrop API 和 Mozilla 的 DataTransfer 对象。随着 HTML5 标准的推出，现代浏览器开始支持标准化的拖放 API，其中包括 draggable 属性、dragstart 事件和 drop 事件。
然而，在某些情况下，我们可能会发现在 Google Chrome 浏览器中无法触发 drop 事件。这个问题一般出现在以下两种情况下：
- 当我们尝试在一个没有设置
draggable属性的元素上触发拖放事件时。 - 当我们尝试在一个设置了
draggable属性的元素上触发拖放事件，并且该元素的dropzone属性为copy或move。
原因分析
这个问题的原因与 Google Chrome 浏览器的实现有关。在 Chrome 中，如果一个元素没有设置 draggable 属性，或者其 draggable 属性的值为 false，则该元素将不会被认为是可拖动的。因此，当我们在这样的元素上尝试触发拖放事件时，浏览器会忽略它们。
另一方面，当一个元素设置了 draggable 属性，并且其 dropzone 属性为 copy 或 move 时，在 Chrome 中，只有在同时按下 Ctrl、Alt 或 Shift 键时才能触发 drop 事件。否则，浏览器将把拖放操作视为复制或移动文件到本地文件系统中，而不是执行跌落操作。
解决方案
要解决这个问题，我们需要明确以下几点：
- 要想在 Google Chrome 浏览器中触发跌落事件，必须为目标元素设置
draggable属性，并且其值为true。 - 如果我们想让元素可以被拖动到其他容器中，我们需要在目标容器中设置
ondragover事件，并阻止默认行为。 - 如果我们想在目标容器中执行跌落操作，我们需要在目标容器中设置
ondrop事件，并阻止默认行为。 - 如果我们需要执行特定类型的跌落操作，我们可以为目标元素设置
dataTransfer对象，并指定数据类型和值。
下面是一个示例代码：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------------
-------
------
---- ---------------
---- ----------- -----------------------------
---- ----------------------
------
--------
----- ------ - ----------------------------------
----- ------ - ----------------------------------
------------------------------------ -----------------
----------------------------------- ----------------
------------------------------- ------------
-------- ---------------------- -
---------------------------------------- -----------------
-
-------- --------------------- -
-----------------------
-
-------- ----------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------