HTML拖放OnDrop Ajax事件

HTML drag and drop OnDrop Ajax event

本文关键字：事件 Ajax OnDrop 拖放 HTML      更新时间：2023-09-26

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

    <?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)">

我可以随意将每个缩略图来回拖动到每个div中。

我的问题：

使用Ajax，有人能提供一个例子来执行一个拖放事件，并将其发布到我有数据库工作的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;
}

主页.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并插入一个垃圾记录。

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'];
相关文章：