拖放（事件）不会触发 ajax POST答案

【问题标题】：Drag and Drop(event) not trigger ajax POST拖放（事件）不会触发 ajax POST
【发布时间】：2015-12-16 01:43:47
【问题描述】：

我有三个页面：test.php、script.js 和 main.php。

Main.php 使用 html5 拖放以及来自 script.js 的简单 ajax 脚本，以便发布到并激活 test.php。（旁注，我希望 main.php 将 <img id="s1" /> 作为 POST 变量传递。经过几个小时的研究和一百次左右的测试和修订，我无法弄清楚为什么我无法通过 ondrop 触发帖子。任何建议将不胜感激。这是我的代码：

test.php（包含一个简单的 php 脚本，加载时会在我的数据库中插入一条通用记录）

script.js

function drop(id, event) {
   $.ajax({
        url: "test.php",
        type: "POST",
        data: {
            id: id,
            event: event
        },
        success: function () {
            console.log('great success');
            return true
        }
    });
    return false;
}

和main.php

<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/script.js"></script>
<header class="main-header" role="banner"><center>
  <img src="lampettalogo.jpg" height="90" width="400"alt="Banner Image"/></center>
</header>
<style>

#1 {width:auto;height:auto;padding:1px;border:1px solid #aaaaaa;}
#2 {width:auto;height:auto;padding:1px;border:1px solid #aaaaaa;}
#3 {width:auto;height:auto;padding:1px;border:1px solid #aaaaaa;}
#4 {width:auto;height:auto;padding:1px;border:1px solid #aaaaaa;overflow: auto;}
</style>

</head>
<body>
<div id="1" ondrop="drop(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 = "SELECT * FROM ss where currentZone = 1";
if ($result = mysqli_query($link, $query)) {
    /* fetch associative array */
    while ($row = mysqli_fetch_assoc($result)) {
        echo "<img id='{$row["sID"]}' src='{$row["photoLink"]}.jpg' draggable='true' ondragstart='drag(event)' width='75' height='75'>"  ;
    }
    /* free result set */
    mysqli_free_result($result);
}
 mysqli_close($link);
 /////////////////////////////////////////////////////////////////////////////////
?>
</div>
<div id="2" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php
include "database_connection.php";
$query = "SELECT * FROM ss where currentZone = 2";
if ($result = mysqli_query($link, $query)) {
    /* fetch associative array */
    while ($row = mysqli_fetch_assoc($result)) {        
        echo "<img id='{$row["sID"]}' src='{$row["photoLink"]}.jpg' draggable='true' ondragstart='drag(event)' ondrop='drop(event)' width='75' height='75'>"  ;
    }
    /* free result set */
    mysqli_free_result($result);
}
 mysqli_close($link);
?>
</div>
<div id="3" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php
include "database_connection.php";
$query = "SELECT * FROM ss where currentZone = 3";
if ($result = mysqli_query($link, $query)) {
    /* fetch associative array */
    while ($row = mysqli_fetch_assoc($result)) {        
        echo "<img id='{$row["sID"]}' src='{$row["photoLink"]}.jpg' draggable='true' ondragstart='drag(event)' width='75' height='75'>"  ;
    }
    /* free result set */
    mysqli_free_result($result);
}
 mysqli_close($link);
?>
</div>
<div id="4" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php
include "database_connection.php";
$query = "SELECT * FROM ss where currentZone = 4";
if ($result = mysqli_query($link, $query)) {
    /* fetch associative array */
    while ($row = mysqli_fetch_assoc($result)) {        
        echo "<img id='{$row["sID"]}' src='{$row["photoLink"]}.jpg' draggable='true' ondragstart='drag(event)' width='75' height='75'>"  ;
    }
    /* free result set */
    mysqli_free_result($result);
}
 mysqli_close($link);
?>
</div>
<div id="4" ondrop="drop(event)" ondragover="allowDrop(event)">
<?php
include "database_connection.php";
$query = "SELECT * FROM ss where currentZone = 0";
if ($result = mysqli_query($link, $query)) {
    /* fetch associative array */
    while ($row = mysqli_fetch_assoc($result)) {        
        echo "<img id='{$row["sID"]}' src='{$row["photoLink"]}.jpg' draggable='true' ondragstart='drag(event)' width='75' height='75'>"  ;
    }
    /* free result set */
    mysqli_free_result($result);
}
 mysqli_close($link);
?>
</div>
</body>
</html>

【问题讨论】：

无。它只是没有做任何事情。
你没有allowDrop()函数
查看此指南以获取指导。 w3schools.com/jsref/event_ondrop.asp
函数没有被调用吗？
您能否使用其他 javascript 代码（如 allowdrop 函数）更新问题。也许是一个 jsfiddle

标签： javascript php jquery ajax html

【解决方案1】：

在您的drop(id, e) 方法中，除了您的allowDrop 方法之外，您还可以考虑以下内容。使用FileReader 类来读取您的文件。

function drop(id, e) {
  if (e.dataTransfer && e.dataTransfer.files.length != 0) {
    var file = e.dataTransfer.files[0], // Only the first file.
      reader = new FileReader();

    reader.readAsDataURL(file);

    reader.onload = function (event) {
      console.log(file.name);
      $.ajax({
        url: "test.php",
        type: "POST",
        data: {
          id: id,
          fileName: file.name, // Your file name.
          file: event.target.result // Your file.
        },
        success: function () {
          console.log('great success');
          return true
        }
      });
    };
  }
}

在您的 HTML 中，您还需要在 id 中传递一个值。例如，您可以执行以下操作，将您的$row["sID"] 打印到方法参数中。

<div id="1" ondrop="drop('<?php echo $row["sID"]; ?>', event)" ondragover="allowDrop(event)">

在您的 PHP 脚本中，您需要能够接收POSTed 文件。下面是一个例子。

$data = $_POST['file'];
$fileName = $_POST['fileName'];
$id = $_POST['id'];

$serverFile = $fileName . "-" . time(); // Appends timestamp so that files of the same name wouldn't be overwritten.
$fp = fopen('/uploads/' . $serverFile, 'w');
fwrite($fp, $data);
fclose($fp);
$returnData = array( "serverFile" => $serverFile );
echo json_encode($returnData);

请参阅此plunker 以获取示例。将文件拖放到 div 中，然后查看控制台日志。

编辑

了解您希望改为拖放元素。

以下是更新后的plunker。

【讨论】：

如果我使用你的 script.js 方法，我不能再拖放。还有什么我应该添加的吗？如果我通过添加 function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } 来做 drop(ev) 而不是 drop(id, event) 编辑* 做我可以拖动但不能丢弃的 JS，它确实有效。
因为你的参数必须匹配方法签名。你问过（在旁注中）你也想通过id，所以我也给出了答案。但是，如果您不想传递 id，则只需从方法签名中删除 id 参数。
是的，考虑打印出$row["sID"] 作为参数值，比如ondrop="drop('<?php echo $row["sID"]; ?>', event)"。
您愿意提供一个示例来说明您将如何处理我的代码吗？我似乎没有掌握这个概念。我对 JS 和 ajax 很陌生。我想我的问题是，如果我使用你的 script.js，为什么我的拖放停止工作。我的工作 JS 代码是 function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } 真的很抱歉我的速度很慢，只是想弄清楚这一点。
别担心！在我的 script.js 中，我有 id 参数（即 drop(id, e) （正如你在问题中所问的那样）。但我相信你现有的 HTML，你仍然只传递一个参数（没有 @987654341 @，即drop(e)）。所以drop(id, e) 将读取id = e 和e = null（文件作为第一个参数传递，这不是我们想要的）。更正是传递你的@987654346 @ 作为您的 div 中的参数值，或您将 id 作为我的 script.js 中的参数删除。