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

Question

  

注意：请勿将 jQuery Sortable 与 jQuery UI Sortable

混淆

我在页面上每<li> <ul> <li> <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> 使用$("#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); } } ，但当我重新排列Slideshow时，控制台显示元素两次

这就是列表在页面上的样子：

jQuery Sortable 一切都还可以！

这是控制台上列表的样子：

这就是问题所在！

HTML code：

Image

JS代码：

Image

  

PS：我已经在原始代码中包含了所有必要的库：

     

  
• 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>

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

Command 2
Command 3 {
    Command 1
}
Command 1

因此，如果您想获得可排序ul的文本表示，您应该只使用以下选择器获取第一级li项：#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>

修改根据docs，您应该使用以下代码获取可排序的序列化版本：$("#lista").sortable("serialize")（我在代码段中添加了一个示例）。