0
我有一个Web应用程序正在使用拖放功能来排序数据。我发现在iOS设备上通过Safari浏览器进行拖放是不行的。我正在寻找一种临时解决方案，以允许应用程序在我使用IOS应用程序时运行。我想知道是否有可能使用Ajax POST单击到数据工作页面我已经处理拖放操作。这是我到目前为止。使用Ajax onclick
包含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接受的职位，并对其进行处理。是否有可能让Onclick执行与drop相同的操作？我的希望是可以做到的，我不必使用传统的硬编码获得ahrefs来实现我的目标。重要的是要注意，因为如果我使用与拖放相同的函数，它们也是拖放操作，所以我需要考虑containerID。这种方式POST功能知道它实际上是去对面的容器，而不是它被点击的那个。
您是否尝试过添加“touch punch”？它可以正确触摸jQuery UI并解决大部分IOS交互问题（包括拖放）。 –
我没有使用JqueryUI。我正在使用HTML5本地拖放功能。 –
它不是*仅用于jQuery UI。无论如何，请尝试。以防万一。 :) –