Question

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

Page1.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>

Script.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执行与drop相同的操作？我的希望是可以做到的，而且我不必使用传统的硬编码获得ahrefs来实现我的目标。重要的是要注意，因为它们也是拖放，如果我使用与拖放相同的功能，我需要考虑containerID。这样POST功能就知道它实际上是去了对面的容器，而不是它被点击的容器。

Answer 1

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

onclick使用Ajax

1 个答案: