使用 Ajax 点击

onclick using Ajax

本文关键字：点击 Ajax 使用      更新时间：2023-09-26

我有一个使用拖动/拖动功能对数据进行排序的 Web 应用程序。我发现在IOS设备上通过野生动物园拖放是不行的。我正在寻找一种临时解决方案，以允许应用程序在我处理 IOS 应用程序时运行。我想知道是否可以在单击我拥有的处理拖放操作的数据工作者页面时使用 Ajax 进行 POST。这是我到目前为止所拥有的。

页1.php包含

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="/js/script.js"></script>
    <header class="main-header" role="banner"><center>
</header>
  </head>
  <body>
  <center>
 <table>
 <tr><td>
 <div id="available" ondrop="drop('list', event)" ondragover="allowDrop(event)">
 <p> <font color="blue">SID</font> | Last, First </p> <?php 
include "database_connection.php";
///////////////////////////////////////////////////////////////////////////////////////////////
/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s'n", mysqli_connect_error());
    exit();
}
else
{
}
$query = "*******";
if ($result = mysqli_query($link, $query)) {
    /* fetch associative array */
    while ($row = mysqli_fetch_assoc($result)) {
            echo "<p id='{$row["sID"]}' draggable='true' onclick='drop(event)' ondragstart='dragStart(event)' width='75' height='75'> <font color='blue'> {$row["sID"]}</font> |  {$row["lastName"]}, {$row["firstName"]}</p></a>";
    }
    /* free result set */
    mysqli_free_result($result);
}
 mysqli_close($link);
 /////////////////////////////////////////////////////////////////////////////////
?>
 </div>
 </td>
 <td>
 <div id="order" ondrop="drop('order', event)" ondragover="allowDrop(event)">
  <?php 
include "database_connection.php";
///////////////////////////////////////////////////////////////////////////////////////////////
/* check connection */
if (mysqli_connect_errno()) {
    printf("Connect failed: %s'n", mysqli_connect_error());
    exit();
}
else
{
}
$query = "*********";
if ($result = mysqli_query($link, $query)) {
    /* fetch associative array */
    while ($row = mysqli_fetch_assoc($result)) {
        echo "<p id='{$row["sID"]}' draggable='true' ondragstart='dragStart(event)' width='75' height='75'><font color='blue'>  {$row["sID"]} </font>| {$row["lastName"]}, {$row["firstName"]} </p></a>";
    }
    /* free result set */
    mysqli_free_result($result);
}
 mysqli_close($link);
 /////////////////////////////////////////////////////////////////////////////////
?>
 </div>
 </td>
</tr>
  </body>
</html>

脚本.js包含

function drop(containerId, e) {
  var id = event.dataTransfer.getData("id");
  console.log(id);
  $.ajax({
    url: "dataworker.php",
    type: "POST",
    data: {
      id: id,
      containerid: containerId,
      //fileName: file.name, // Your file name.
      //file: event.target.result // Your file.
    },
    success: function() {
      console.log('great success');
      window.location.reload()
      return true
    }
  });
}
function dragStart(e) {
  console.log(e);
  e.dataTransfer.setData("id", e.srcElement.id);
}
function allowDrop(e) {
  e.preventDefault();
}

第三页，Dataworker，只是通过php接受POSTS并处理它们。是否也可以让 Onclick 执行与丢弃相同的操作？我希望这是可以做到的，我不必使用传统的硬编码 get ahrefs 来实现我的目标。重要的是要注意，如果我使用与拖放相同的功能，它们也是拖放式的，因此我需要考虑 containerID。这样，POST 功能就知道它实际上要转到相反的容器，而不是单击它的容器。

我通过添加IOS html 5拖放垫片找到了答案。https://github.com/timruffles/ios-html5-drag-drop-shim。这是一个允许移动浏览器注册拖动的黑客。感谢TrueBlueAussie让我走上了正确的轨道。谢谢！

相关文章：