可投放(投放区)返回未定义

时间:2019-06-21 10:57:05

标签: php drag-and-drop jquery-ui-draggable

我最近一直在设计一个拖放项目来记录体育统计数据,但是要使其在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 {


}
?>

返回可拖动对象的正确值,但可放置对象返回未定义

0 个答案:

没有答案