我最近一直在设计一个拖放项目来记录体育统计数据,但是要使其在iPad /平板电脑上运行,我需要使用Jquery而不是JavaScript,并且我试图理解Jquery的基础。使用JavaScript,我适合拖动和元素(播放器),然后放入dropzone(犯规,宽度,目标等),它将从保管箱获得事件的名称。但是,使用Jquery尝试此操作,Dropbox将未定义返回到数据库中。
如何解决此问题?
网页的主要部分
<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 {
}
?>
返回可拖动对象的正确值,但可放置对象返回未定义