使用 JQuery Ajax 的动态拖放表行

我们将使用 JQuery Ajax 动态拖放表格行。如果任何用户或客户想要了解拖放列表项、表格行、div 或动态排序的流程，这将是非常有趣的事情。在我们的示例中，我们将使用 JQuery UI 来创建表格的拖放行。我们还将使用 PHP 使其动态化。基本上，我们将使用 JQuery Ajax 将数据保存到数据库中。

如果我们想制作一个有吸引力且更好的布局，可以使用 Bootstrap 来实现。我们还可以使用 JQuery UI 开发一个可排序的表格行。在我们的示例中，我们无需下载并保存到我们的计算机上，因为我们将使用 CSS 或 CDN JS 来实现。之后，我们将创建一个名为“sorting_items”的表，其中包含 title、id、position_order 和 description 列。我们可以使用 Ajax 将所有这些内容放在一个页面上。为此，我们将按照以下步骤操作：

步骤 1

这是第一步，在这一步中，我们将创建数据库表。在我们的示例中，我们需要表和数据库，因此我们将两者都创建。我们将创建一个名为“sorting_items”的表和一个名为“laravel_test”的数据库，其中包含 id 和 name 列。我们将使用以下 SQL 查询来创建“sorting_items”表。

SQL 查询

步骤 2

在这一步中，我们将创建 index.php 文件。这里将显示所有数据，我们将通过编写以下代码执行排序。我们将使用拖放来对表格行进行排序。因此，我们将创建 index.php 文件，然后添加以下代码

index.php

步骤 3

现在，我们将创建数据库配置文件。为此，将设置数据库的名称、用户名和密码。我们将使用根目录创建文件“db_config.php”。为此，我们将放入以下代码

db_config.php

步骤 4

这是最后一步，在这一步中，我们将创建 ajaxPro.pho 文件。我们将通过创建 Ajax 文件来保存我们的数据。因此，我们将创建一个 ajaxPro.php 文件，然后添加以下代码

ajaxPro.php

现在上面的代码已准备好运行。上面代码的输出如下所示