Question

我有一个简单的页面，它使用由MySQLi函数创建的HTML Drag and Dropable缩略图。像这样

    <?php
    include "database_connection.php";
    $query = "SELECT * FROM table where currentZone = 0";
    if ($result = mysqli_query($link, $query)) {
        /* fetch associative array */
        while ($row = mysqli_fetch_assoc($result))
 {      
            echo "<img id='{$row["ID"]}' 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="1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="3" ondrop="drop(event)" ondragover="allowDrop(event)">
<div id="4" ondrop="drop(event)" ondragover="allowDrop(event)">

我可以随意来回拖动每个缩略图。

我的问题：

使用Ajax，任何人都可以提供一种方法来执行一个on-drop事件的示例，以便发布到我的数据库工作的php页面吗？

示例：如果我拾取thumbnail-1并将其放入div-2，那么一个on-drop事件是否可以触发我的php代码，以便我可以修改我的数据库以反映从div到div的变化？

我知道我可以通过将<img id="">推送到ajax脚本来实现这一点，但经过几个小时的搜索后，我无法找到证明可以完成的示例代码。我是Ajax的新手，我能够使用输入字段使ajax正常工作，但在使用拖放事件时无法找到任何帮助。任何帮助都会非常感激。

编辑**

以下是当前代码：

的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;
}

mainpage.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="logo.jpg" height="90" width="400"alt="Banner Image"/></center>
</header>

<script>
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>
</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 table where currentZone = 1";

if ($result = mysqli_query($link, $query)) {

    /* fetch associative array */
    while ($row = mysqli_fetch_assoc($result)) {


        echo "<img id='{$row["ID"]}' 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 table where currentZone = 2";
if ($result = mysqli_query($link, $query)) {
    /* fetch associative array */
    while ($row = mysqli_fetch_assoc($result)) {        
        echo "<img id='{$row["ID"]}' src='{$row["photoLink"]}.jpg' draggable='true' ondragstart='drag(event)' width='75' height='75'>"  ;
    }
    /* free result set */
    mysqli_free_result($result);
}
 mysqli_close($link);
?>

</div>
 ?>

并且test.php仅连接到DB并插入垃圾记录。

Answer 1

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

然后在你的do_sql_stuff.php中你可以得到

$event = $_POST['event']; 
 $id   = $_POST['id'];

HTML拖放OnDrop Ajax事件

1 个答案: