jQuery UI 是一个流行的前端框架，它提供了许多交互式的用户界面组件。其中之一是拖放（drag-and-drop）功能，可以让用户通过鼠标点击并拖动元素来实现交互。本文将介绍如何使用 jQuery UI 拖放功能，并在拖放过程中更改被拖动的元素。
准备工作
首先，您需要引入 jQuery 和 jQuery UI 的库文件。如果已经有了这些文件，可以跳过本节。
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------ ------ -- ---- --- ------------ ----- ---------------- ------------------------------------------------------------- ------- ----------------------------------------------------- ------- -------------------------------------------------------- ------- ------ ---- ---- ---- ---- ---- --- ------- -------
实现拖放
接下来，我们将创建一个简单的示例，以演示如何使用 jQuery UI 拖放功能。在示例中，我们将创建两个可拖动的 div 元素，当您将一个元素拖动到另一个元素上方时，拖放功能将自动启动。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ------ -- ---- --- ------------
----- ---------------- -------------------------------------------------------------
------- -----------------------------------------------------
------- --------------------------------------------------------
-------
---------- -
------ ------
------- ------
----------------- -----
------ -----
----------- -------
------------ ------
-
---------- -
------ ------
------- ------
----------------- -----
-
--------
-------
------
---- ---------------------- --------
---- ---------------------- -- ---------
---- ---------------------- ----------
--------
---------------------------- -
----------------------------
---------------------------
----- --------------- --- -
--------------------------
-
---
---
---------
-------
-------在示例中，我们定义了两个可拖动的 div 元素和一个可放置元素的 div 元素。我们使用 CSS 来定义这些元素的样式。然后，我们在 JavaScript 中将 .draggable 类和 .droppable 类分别指定为可拖动和可放置的元素，并启用了 jQuery UI 拖放功能。
在 .droppable 元素上添加了一个 drop 事件监听器，当您将一个元素拖动到该元素上方并释放鼠标按钮时，这个监听器就会被触发。在本例中，我们在控制台中输出了被拖动的元素对象。
更改拖动的元素
现在，我们来实现更改被拖动的元素。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------ ------ -- ---- --- ------------
----- ---------------- -------------------------------------------------------------
------- -----------------------------------------------------
------- --------------------------------------------------------
-------
---------- -
------ ------
------- ------
----------------- -----
------ -----
-----------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------