Question

如何获得＆＃39; li＆＃39;拖放的数字li

例如，

<ol>
    1. <li>A</li>
    2. <li>B</li>
    3. <li>C</li>
    4. <li>D</li>
    5. <li>E</li>
</ol>

这个数字只是固定李号的例子，如果我拖放李，我得到固定的李号，如果像这样

<ol>
    1. <li>E</li>
    2. <li>C</li>
    3. <li>B</li>
    4. <li>D</li>
    5. <li>A</li>
</ol>

结果是：

E is||= 1
C is||= 2
B is||= 3
D is||= 4
A is||= 5

我尝试使用此代码，但仍然得到＆＃39; -1＆＃39;

var index = $(this).parent('ol').index();

我从这个活动中获得了李号

onDrop: function ($item, container, _super, event) {
      item.removeClass(container.group.options.draggedClass).removeAttr("style")
      $("body").removeClass(container.group.options.bodyClass)
      var index = $(this).parent('ol').index();
      $( ".number" ).text( "That was div index #" + index );
},

感谢

Answer 1

工作示例（获取更新li原始和更改的索引）： -

＆＃13;

$(function() {
    $( "#sortable" ).sortable({
        update: function(event, ui) { 
            console.log('update: '+(ui.item.index()+1))
        },
        start: function(event, ui) { 
            console.log('start: ' +(ui.item.index()+1))
        }
    });
    $( "#sortable" ).disableSelection();
});

＆＃13;

ol li {
  background-color:green;
  border:2px solid black;
  margin:10px;
  color:white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ol id="sortable">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ol>

＆＃13;

Answer 2

我认为你的意思是你想要在拖动之后将数字关联起来。这是一种做法。

＆＃13;

$( "#sortable" )
  .sortable()
  .find("li")
    .each(function (index) {
      $(this).prepend(index+1 + ". ");
    })

＆＃13;

ol li {
  background-color:#777;
  border:2px solid black;
  margin:2px;
  color:black;
}

ol {
  list-style-type:none;
  padding:0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"><script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<ol id="sortable">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
</ol>

＆＃13;

如何使用jquery获取li数字

2 个答案: