Недавно я разрабатывал проект перетаскивания для записи спортивной статистики, но чтобы он работал на iPad / планшетах, мне нужно использовать Jquery вместо Javascript, и я пытаюсь понять основы Jquery. С помощью javascript я был в состоянии перетащить и элемент (игрок), а затем перейти в dropzone (фол, широкий, цель и т. Д.), И он получит название события из выпадающего списка. Однако, испытывая это с помощью Jquery, Dropbox возвращает неопределенное значение в базу данных. Любая помощь будет принята с благодарностью, Большое спасибо
ОСНОВНАЯ ЧАСТЬ WEBPAGE
<style>
#draggable_1 { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float:
left;
margin: 10px; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script src="jquery.ui.touch-punch.js"></script>
<script>
$( function() {
$( "#draggable_1" ).draggable({ revert:true });
$( "#droppable" ).droppable({
classes: {
"ui-droppable-active": "ui-state-active",
"ui-droppable-hover": "ui-state-hover"
},
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
var value=$(ui.draggable).attr('id');
var name=$(ui.droppable).attr('name');
$.ajax({
url: 'jqueryserver.php',
type: 'POST',
data: 'value='+value+'&name='+name,
dataType: 'html'
})
}
});
} );
</script>
</head>
<body>
<h2 id="app_status" >Hello</h2>
<div id="draggable_1" class="ui-widget-content">
<p>I revert when I'm dropped</p>
</div>
<div id="droppable" name="goal" class="ui-widget-header">
<p>Drop me here</p>
</div>
PHP FILE
<?php
include('conn.php');
$value=filter_var($_POST['value'],FILTER_SANITIZE_STRING);
$event=filter_var($_POST['name'],FILTER_SANITIZE_STRING);
$insertvalue="INSERT INTO hello(id, value,event) VALUES
('','$value','$event')";
$result=$conn->query($insertvalue);
if(!$result){
echo $conn->error;
} else {
}
?>
MAIN PART OF WEBPAGE
<pre> <code> <style>
#draggable_1 { width: 100px; height: 100px; padding: 0.5em; float:
left; margin: 10px 10px 10px 0; }
#droppable { width: 150px; height: 150px; padding: 0.5em; float:
left;
margin: 10px; }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">
</script>
<script src="jquery.ui.touch-punch.js"></script>
<script>
$( function() {
$( "#draggable_1" ).draggable({ revert:true });
$( "#droppable" ).droppable({
classes: {
"ui-droppable-active": "ui-state-active",
"ui-droppable-hover": "ui-state-hover"
},
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
var value=$(ui.draggable).attr('id');
var name=$(ui.droppable).attr('name');
$.ajax({
url: 'jqueryserver.php',
type: 'POST',
data: 'value='+value+'&name='+name,
dataType: 'html'
})
}
});
} );
</script>
</head>
<body>
<h2 id="app_status" >Hello</h2>
<div id="draggable_1" class="ui-widget-content">
<p>I revert when I'm dropped</p>
</div>
<div id="droppable" name="goal" class="ui-widget-header">
<p>Drop me here</p>
</div>
PHP FILE
<?php
include('conn.php');
$value=filter_var($_POST['value'],FILTER_SANITIZE_STRING);
$event=filter_var($_POST['name'],FILTER_SANITIZE_STRING);
$insertvalue="INSERT INTO hello(id, value,event) VALUES
('','$value','$event')";
$result=$conn->query($insertvalue);
if(!$result){
echo $conn->error;
} else {
}
?>
Возвращает правильное значение перетаскиваемого объекта, но значение сбрасываемого значения не определено