Question

这里我在jQuery中使用拖放。

我从数组中的数据库（文章 - ＆gt;问题，文章 - >答案）中获取一组问题和一组答案，其中答案可以拖放到问题文本框中。在刷新页面时，拖动的值将被放置到原始位置，而不是在我丢弃的特定文本框中。

这是我的编码。

  <html>
<head>
   <meta charset="utf-8" />
    <title>jQuery UI Draggable - Default functionality</title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-  ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <!--<link rel="stylesheet" href="/resources/demos/style.css" />  -->
 <style>
 /*#draggable { width: 50px; height: 20px; padding: 0.5em; } */
.drag_ans {
background: none repeat scroll 0 0 transparent;
border: 0 none;
width: 100px;
}
#draggable {
width: 50px;
height: 20px;
background: white;
}
#droppable {
float: left;
margin: 50px;
width: 500px;
height: 300px;
 border: green;
}

   #ques {
background: none repeat scroll 0 0 #FFFFFF;
padding: 10px;
width: 100px;

  }
 </style>

   <script>
    $(document).ready(function(){
    $("#answer").click(function(){
 // alert('find a score');
    });
      });
  </script>
 </head>

<body>
<div class="container_inner">

<?php

 foreach($data as $article)
  {
   echo "<p>";
    echo "<b>";echo $article->article_name;
echo"</b>";
echo "</p>";
echo "<p>";
     echo $article->description;
  echo "</p>";
echo $article->video; echo "<br>";
    }
   ?>
  <?php
  $add=1;
foreach($question as $article)
     {
?>
    <!--    <div id="drop">  -->

   <p>
 <?php echo $article->question; ?>
 <input type ="text" id="ques_<?php echo $add; ?>" name="" class="ui-widget-content" />
  </p>
  <!--</div>  -->
<?php 
$add++;
    }
   ?>  



   <?php
      $counter=1;
    foreach($question as $article)
      {
?>
 <script>
      $(function() {

       $("#draggable_<?php echo $counter; ?>").draggable({ revert: 'invalid' });

     $("#ques_<?php echo $counter; ?>").droppable({

   drop: function( event, ui ) {

      $(this).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
      }
      });
       });
       </script> 
    <div id="draggable_<?php echo $counter; ?>" class="ui-widget-content drag_ans">
   <p>
    <?php echo $article->answer; ?>
    </div>
  </p>
 <?php 
$counter++;
  }
 ?>  

  <p> <input class="green_but" type="submit" name="NEW_SUBMIT" value="Submit" id="answer"/> </p>
  </div>
</body>
  </html>

拖放工作正常，并在问题文本框中刷新页面值全部为空。如何在jquery中验证问题和答案，因为这个答案应该在删除问题文本框后存储在DB中。当点击提交按钮时，如果回答问题错误，则分数应该减少。 EX：如果用户回答设置正确答案中的4分，那么得分应该是10分中的4分。

Answer 1

我不确定我们要做什么...你在帖子中说出答案......需要保存设置。显然他们没有得到保存，所以你有两种方法可以这样做......

1）提交表格并保存值

2）通过附加到其中一个事件处理程序的ajax保存值（可能是第一个：http://api.jqueryui.com/draggable/#event-stop）

我建议您在学习Web开发的基础知识时不要执行整个拖放操作。

刷新时值不应为空，它应将值存储在数据库中

1 个答案: