Drag and Drop (event) not trigger ajax POST

У меня есть три страницы: test.php, script.js и main.php.Drag and Drop (event) not trigger ajax POST

Main.php использует html5 drag and drop вместе с простым скриптом ajax из script.js, чтобы опубликовать и активировать test.php. (side note, мне хотелось бы, чтобы main.php передал <img id="s1" /> в качестве переменной POST. После нескольких часов исследований и сотен испытаний и ревизий я не могу понять, почему я не могу получить ondrop для запуска сообщения. . был бы весьма признателен Вот мой код:

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

и основное .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>

источник

2015-12-16 Robert Dickey

Любые ошибки, показывающие? – momouu

нет. он просто ничего не делает. –

У вас нет функции allowDrop() – momouu

В вашем методе 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 скрипт, вы должны быть в состоянии получить файл POST ред. Пример показан ниже.

$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.

источник

2015-12-16 02:35:17

Если я пойду с вашим методом для script.js, я больше не могу перетаскивать. Есть ли что-то еще, что я должен добавить? Он работает, если я делаю drop (ev) вместо drop (id, event) Редактировать *, добавив 'function allowDrop (ev) {ev.preventDefault(); } функция drag (ev) {ev.dataTransfer.setData ("text", ev.target.id); } 'JS я могу перетащить, но не могу отказаться. –

Поскольку ваши параметры должны соответствовать сигнатуре метода. Вы спросили (на боковой ноте), что вы хотели бы передать «id», поэтому я также дал ответ. Однако, если вы не хотите передавать идентификатор 'id', просто удалите параметр' id' из подписи метода. –

Да, рассмотрите распечатку '$ row [" sID "]' в качестве значения вашего параметра, например 'ondrop = 'drop (' ', Event)". –

Drag and Drop (event) not trigger ajax POST

ответ

Смежные вопросы