<li> 正在使用 jquery 可排序的 onDrop 事件进行克隆

Question

Attention: Don't confuse jQuery Sortable with jQuery UI Sortable

我正在使用 jQuery Sortable 到 console.log() 页面上每个 <ul> 的每个 <li>，但是当我重新排列 <li> 时，控制台显示元素两次

页面上的列表如下所示：

这里一切正常！

控制台上的列表如下所示：

问题就在这里！

HTML代码：

<div id="cmd_container">
        <button class="w3-btn w3-blue" onclick="inclib()">Comando de linha única</button>
        <button class="w3-btn w3-blue" onclick="conditional()">Comando de multiplas linhas</button> 
        <button class="w3-btn w3-light-grey" onclick="serialize()">Serializar lista</button>
</div>

<!-- The list -->
<p>Código padrão:</p>
<ul id="lista"></ul>

JS代码：

$("#lista").sortable();

function serialize() {
    console.clear();
    $.each($("li"), function() {
        console.log($(this).text());
    });
}

// SINGLE LINE COMMAND (DEMO 1)
function inclib() {
    var biblioteca = prompt("Digite o nome da biblioteca:");
    if (biblioteca == "" || biblioteca == null) {
        alert("Digite o nome do comando!");
    } else {
        var html = "" +
            "<li>" + biblioteca + "</li>\n"
        $("#lista").append(html);
    }
}

// MULTIPLE LINES COMMAND (DEMO 2)
function conditional() {
    var condicional = prompt("Digite a expressão conditional:");
    if (condicional == "" || condicional == null) {
        alert("Digite o nome do comando!");
    } else {
        var html = "" +
            "<li>" +
                condicional + " {\n" +
                "<ul></ul>" +
                "\n}" +
            "</li>"
        $("#lista").append(html);
    }
}

PS: I've already included all the necessary libraries on the original code:

jQuery 3.3.1

jQuery Sortable

Answer 1

问题是您正在尝试获取文档中的所有 li 项目，如果您添加两个带有 inclib 的文本：Command 1 和 Command 2 那么您将拥有以下 html:

<ul id="lista">
  <li>Command 1<li>
  <li>Command 2</li>
</ul>

你添加另一个使用 conditional 和文本：Command 3 然后你将有以下 html:

<ul id="lista">
  <li>Command 1<li>
  <li>Command 2</li>
  <li>Command 3 {
      <ul></li>
  }
  </li>
</ul>

如果您将 Command 1 或 Command 2 移动到 Command 3 内，那么您将得到以下 html:

<ul id="lista">
  <li>Command 2</li>
  <li>Command 3 {
      <ul>
          <li>Command 1<li>
      </li>
  }
  </li>
</ul>

当您 select 文档中的所有 li 项目时，使用 $("li")，您将获得 3 个项目，但是（在我描述的情况下）嵌套 ul 的项目将 return 它的所有内容（包括嵌套 li 的内容）如果你使用 jQuery .text() 函数获取它的文本，那么你将得到以下输出：

Command 2
Command 3 {
    Command 1
}
Command 1

因此，如果您想获得可排序 ul 的文本表示，您应该只获得第一级 li 项目，使用以下 select 或：#lista > li.

检查我的工作示例。希望对你有帮助。

function serialize() {
   console.clear();
   $.each($("#lista > li"), function() {
    console.log($(this).text());
   });
      var data = $('#lista').sortable("serialize").get();
        console.log(JSON.stringify(data, null, ' '));
  }
  
  // SINGLE LINE COMMAND (DEMO 1)
  function inclib() {
   var biblioteca = prompt("Digite o nome da biblioteca:");
   if (biblioteca == "" || biblioteca == null) {
    alert("Digite o nome do comando!");
   } else {
    var html = "" +
     "<li>" + biblioteca + "</li>\n"
    $("#lista").append(html);
   }
   $('#lista').sortable();
  }
  
  // MULTIPLE LINES COMMAND (DEMO 2)
  function conditional() {
   var condicional = prompt("Digite a expressão conditional:");
   if (condicional == "" || condicional == null) {
    alert("Digite o nome do comando!");
   } else {
    var html = "" +
     "<li>" +
     condicional + " {\n" +
     "<ul></ul>" +
     "\n}" +
     "</li>"
    $("#lista").append(html);
   }
   $('#lista').sortable();
  }
  
  $(document).ready(function() {
   $("#lista").sortable();
  });

<div id="cmd_container">
  <button class="w3-btn w3-blue" onclick="inclib()">Comando de linha única</button>
  <button class="w3-btn w3-blue" onclick="conditional()">Comando de multiplas linhas</button>
  <button class="w3-btn w3-light-grey" onclick="serialize()">Serializar lista</button>
 </div>
 
 
 <p>Código padrão:</p>
 <ul id="lista"></ul>
 
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 <script src="https://johnny.github.io/jquery-sortable/js/jquery-sortable-min.js"></script>

Edit 根据 docs 你应该得到一个可排序的序列化版本：$("#lista").sortable("serialize")（我在代码片段中添加了一个例子）。

<li> 正在使用 jquery 可排序的 onDrop 事件进行克隆

<li> being cloned with jquery sortable onDrop event

html

javascript

jquery

nested-sortable

页面上的列表如下所示：

控制台上的列表如下所示：

HTML代码：

JS代码：