Question

我想要从mysql表中获取拖放问题及其选项，并以正确的顺序进行所有选项。如何检查我的序列到表正确的序列。我有这个拖放代码。

在这个例子中，我们知道正确的序列是1,2,3,4,5,6,7。当我们按正确的顺序拖动并提交它时，我们如何自动匹配提交的序列和正确的序列。这是一种教育测试游戏。

<style>
  body {
    font-family: arial;
    background: rgb(242, 244, 246);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  h3 {
    color: rgb(199, 204, 209);
    font-size: 28px;
    text-align: center;
  }

  #elements-container {
    text-align: center;
  }

  .draggable-element {
    display: inline-block;
    width: 200px;
    height: 200px;
    background: white;
    border: 1px solid rgb(196, 196, 196);
    line-height: 200px;
    text-align: center;
    margin: 10px;
    color: rgb(51, 51, 51);
    font-size: 30px;
    cursor: move;
  }

  .drag-list {
    width: 400px;
    margin: 0 auto;
  }

  .drag-list > li {
    list-style: none;
    background: rgb(255, 255, 255);
    border: 1px solid rgb(196, 196, 196);
    margin: 5px 0;
    font-size: 24px;
  }

  .drag-list .title {
    display: inline-block;
    width: 130px;
    padding: 6px 6px 6px 12px;
    vertical-align: top;
  }

  .drag-list .drag-area {
    display: inline-block;
    background: rgb(158, 211, 179);
    width: 60px;
    height: 40px;
    vertical-align: top;
    float: right;
    cursor: move;
  }

  .code {
    background: rgb(255, 255, 255);
    border: 1px solid rgb(196, 196, 196);
    width: 600px;
    margin: 22px auto;
    position: relative;
  }

  .code::before {
    content: 'Code';
    background: rgb(80, 80, 80);
    width: 96%;
    position: absolute;
    padding: 8px 2%;
    color: rgb(255, 255, 255);
  }

  .code pre {
    margin-top: 50px;
    padding: 0 13px;
    font-size: 1em;
  }

</style>

    <section class="showcase showcase-2">
      <h3>Example 2</h3>
      <ul class="drag-list">
        <li><span class="title">list 6</span><span class="drag-area"></span></li>
        <li><span class="title">list 4</span><span class="drag-area"></span></li>
        <li><span class="title">list 5</span><span class="drag-area"></span></li>
        <li><span class="title">list 1</span><span class="drag-area"></span></li>
        <li><span class="title">list 3</span><span class="drag-area"></span></li>
        <li><span class="title">list 2</span><span class="drag-area"></span></li>
        <li><span class="title">list 7</span><span class="drag-area"></span></li>
      </ul>
    </section>

    <section class="code">
      <pre>
$('li').arrangeable({dragSelector: '.drag-area'});
      </pre>
    </section>


    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="drag-arrange.js"></script>

    <script type="text/javascript">
      $(function() {
          $('.draggable-element').arrangeable();
          $('li').arrangeable({dragSelector: '.drag-area'});
      });
    </script>

Answer 1

你可以使用这样的javaScript来实现：

首先，你需要在某个地方引用问题的ID。为简单起见，只需将其分配给<li>标记的id属性即可。

var sort_order = [];

jQuery('.drag-list li').each(function(index){
     sort_order[index] = this.id;
});

现在，sort_order将包含您的问题ID及其序列。

希望你得到逻辑。现在您可以根据您的要求进行调整。

Answer 2

我得到了这个工作。但是如何将这个应用于从数据库中自动获取的多个问题。

 <script>
  $(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
$( "#savebutton" ).click(function() { LISTOBJ.saveList(); });
});

var LISTOBJ = {
    saveList: function() {
        var listCSV = "";
        $( "#sortable li" ).each(function() {
            if (listCSV === "") {
                listCSV = $(this).val();
            } else {
                listCSV += "," + $(this).val();
            }
            $("#output").text(listCSV);
            $("#hiddenListInput").val(listCSV);
            //$("#listsaveform").submit();
        });
    }
}

 <ul id="sortable">
  <li value="1" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li value="2" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  <li value="3" class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>

</ul>
<input type="button" id="savebutton" value="save"/>
<div id="output"></div>
<form id="listsaveform" method="POST" action="script.php">
    <input type="hidden" name="list" id="hiddenListInput" />
</form>

通过MySQL检查输入数据及其顺序

2 个答案: