Javascript HTML拖放OnDrop Ajax事件_Javascript_Php_Jquery_Html_Ajax

Javascript HTML拖放OnDrop Ajax事件

javascript php jquery html ajax

Javascript HTML拖放OnDrop Ajax事件,javascript,php,jquery,html,ajax,Javascript,Php,Jquery,Html,Ajax,我有一个简单的页面，它使用由MySQLi函数创建的HTML拖放缩略图。像这样 <?php include "database_connection.php"; $query = "SELECT * FROM table where currentZone = 0"; if ($result = mysqli_query($link, $query)) { /* fetch associative array */ while

我有一个简单的页面，它使用由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);
    ?>

mainpage.php


功能allowDrop（ev）{
ev.preventDefault（）；
}
功能阻力（ev）{
ev.dataTransfer.setData（“文本”，ev.target.id）；
}
功能下降（ev）{
ev.preventDefault（）；
var data=ev.dataTransfer.getData（“文本”）；
ev.target.appendChild（document.getElementById（数据））；
}
?>

而test.php仅仅连接到数据库并插入一条垃圾记录

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

然后在do_sql_stuff.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>
 ?>

我试试看。感谢您提供的信息。显然，您需要将id传递到函数中。。。。我也会用php加载它，这样你就可以传入一个变量了，我正要问这个问题。谢谢我可以手动（通过访问url）使php页面正常运行，但在更改div4以执行发布的操作并将函数放入脚本后，它似乎无法发布。关于我遗漏的步骤有什么想法吗？为问题添加了代码-

<!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>
 ?>

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

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