从数组制作可排序的JS列表

时间:2019-01-31 16:10:33

标签: jquery-ui-sortable

我正在尝试从一堆乱序的句子中整理出无序列表,以以下格式应用可排序的JS

<ul id="sortable" class="div3">
<li id = 'number'> </li>
<li id="1" class="ui-state-default">The</li>
<li id="2" class="ui-state-default">piano</li>
<li id="3" class="ui-state-default">play</li>
<li id="4" class="ui-state-default">I</li> 
</ul>
<script>

到目前为止,我已经提出了以下错误的格式

     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>my array to list attempt</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

  <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<style>
li {
list-style:none;
display: inline;
}

</style>
</head>
<body>
<script>
 function makeQuest() {
  var quest=['I play piano the can', 'tired I am', 'are seven there week in a days'];

  for (var i=0; i< quest.length; i++){
        document.write('<ul class ="div3">')
        document.write('<li id = "number">' + (i + 1) +  ' '+ '</li>')
    for (var j=0; j < quest[i].length; j++){
        document.write('<li>' + quest[i][j] + '</li>')
        document.write('</ul>')
            }
        }       
 };

 $(function makeSort() {
    $( ".div3" ).sortable({
      items: "li:not(#number)"

    });

    $( ".div3" ).disableSelection();

   });
</script>

<script>
 makeQuest()
 makeSort()
</script>
</body>
</html>

我不是程序员:只是想让一个语言教学供个人使用。谢谢您的帮助

1 个答案:

答案 0 :(得分:0)

这对我有用,并且可以排序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>my array to list attempt</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">

    <script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

    <style>
        li {
            list-style:none;
            display: inline;
        }

    </style>
</head>
<body>
<ul id="sortable" class="div3">
    <li id = 'number'> </li>
    <li id="1" class="ui-state-default">The</li>
    <li id="2" class="ui-state-default">piano</li>
    <li id="3" class="ui-state-default">play</li>
    <li id="4" class="ui-state-default">I</li>
</ul>
<script>
    $(function makeSort() {
        $( ".div3" ).sortable({
            items: "li:not(#number)"

        });

        $( ".div3" ).disableSelection();

    });
</script>
</body>
</html>