如何查找返回未定义的droppable的值

时间:2019-06-21 13:23:40

标签: php jquery drag-and-drop

我最近一直在设计一个拖放项目来记录体育统计数据,但是要使其在iPad /平板电脑上运行,我需要使用Jquery而不是Javascript,并且我试图理解Jquery的基础。使用javascript我适合拖动和元素(播放器),然后放入dropzone(犯规,宽,目标等),它将从保管箱获得事件的名称。但是,使用Jquery进行测试时,Dropbox会将未定义的返回到数据库中。任何帮助将不胜感激,非常感谢

网页的主要部分

        <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 {


         }
           ?>

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

0 个答案:

没有答案