拖放是Web开发中常见的交互技术之一。jQuery提供了一个方便易用的拖放API，使得实现拖动和放置功能变得更加简单。在这篇文章中，我们将探讨如何使用jQuery实现拖放操作，并且检测是否将元素从可放置区域拖到了不允许的区域。
实现拖放
首先，我们需要定义哪些元素可以被拖放以及哪些元素可以接受拖放。这个过程通过给元素添加 draggable 和 droppable 属性来完成。例如：
<!-- 可以被拖放的元素 --> <div class="drag">拖我</div> <!-- 可以接受拖放的区域 --> <div class="drop">放这里</div>
然后，我们需要使用jQuery的draggable()和droppable()方法来初始化这些元素。例如：
$('.drag').draggable();
$('.drop').droppable();到这里，我们已经成功实现了拖放功能。但是，如果我们要限制拖放操作的范围，该怎么办呢？下面我们来看一下如何检测是否将元素从可放置区域拖到了不允许的区域。
检测拖放操作的范围
要检测拖放操作的范围，我们需要使用over和out事件。当鼠标指针进入可放置区域时，触发over事件，当鼠标指针离开可放置区域时，触发out事件。
例如，下面的代码会在元素被拖动到可放置区域上方时，将区域背景色设置为绿色，在元素从可放置区域离开时，将区域背景色设置为白色。
-- -------------------- ---- -------
----------
------------
----- ---------- -
------------------------------- ---------
--
---- ---------- -
------------------------------- ---------
-
---这样就可以限制用户只能在可放置区域内拖放元素了。但是，如何判断用户是否将元素从可放置区域拖到了不允许的区域呢？
检测拖出可放置区域
要检测拖出可放置区域，我们可以使用jQuery UI的helper选项。当元素被拖动时，helper选项会创建一个占位符元素，该占位符元素会随着鼠标移动而移动。我们可以使用这个占位符元素来检测元素是否已经离开可放置区域。
例如，下面的代码会在元素从可放置区域拖出时，将占位符元素的背景色设置为红色。
-- -------------------- ---- -------
----------
------------
------- ---------- -
------ ------------------------------------------------------- ----------
--
----- --------------- --- -
-- ---------------------------- -
--------------------------------- -------
-
-
---
----------
------------
----- --------------- --- -
---------------------------- ------
-
---这里，我们在helper选项中创建了一个带有黄色背景色的占位符元素。当用户将元素从可放置区域拖出时，在stop事件处理程序中检查占位符元素是否标记为已经放置。如果没有，就
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27339