排序：
我会在一个无序列表 (ul) 中实现这些短语，这使得它像
一样简单
$("#ulId").sortable();
您可以使 ul/li 项目彼此相邻堆叠，其方式与使用 ul 元素制作水平导航菜单的方式类似。
破坏按钮：
只需使用类似于此的模板 li
<li id="text1Wrapper">
<span id="text1"
onmouseover="javascript:$('text1Remove').fadeIn();"
onmouseout="javascript:$('text1Remove').fadeOut();"
onclick="javascript:$('text1Content').
replaceWith(
$(document.createElement('input'))
.attr('type','text')
.val($('text1Content').text())
);">
<span id="text1Content">Text Here</span>
<img id="text1Remove"
style="display: none;"
src="./x.jpg" alt="Remove"
onclick="javascript:$(this).parent().remove();"
/>
</span>
</li>
简要说明：
span 鼠标悬停事件告诉 jquery 淡入删除按钮（因此当您悬停时，删除按钮变为可用）。
span mouse out 事件告诉 jquery 在不再需要时淡出删除按钮（因此当您将鼠标移出 li 时，删除按钮不再可见）
span 的 onclick 将 span 替换为包含 span 内容的文本框。我将把“保存更改”作为练习留给读者，因为它本质上是相同的，但相反。
Img 标签样式有 display: none 来隐藏它。这本质上是 fadeOut() 的最终产品，但没有淡入淡出。
remove 按钮的 on click 事件获取父级（li）并将其删除，并从 dom 中删除所有子级。
请注意，仅将事件放在这里是因为它似乎是解释它的合乎逻辑的地方。外部 SPAN 标记中的所有事件都是无用的空间浪费，因为当我们在下一节中克隆节点时，它们都将被覆盖。
插入页面：
你现在要做的就是
var cloneLi = $('#text1Wrapper').clone();
cloneLi.attr('id', 'text2Wrapper');
var cloneSpan = cloneLi.children('#text1').attr('id', 'text2');
var cloneContent = cloneSpan.children('#text1Content').attr('id', 'text2Content');
var cloneRemove = cloneSpan.children('#text1Remove').attr('id', 'text2Remove');
然后您需要使用 jquery 事件更改外部跨度的 mouseover、mouseout 和 onclick 函数：
cloneSpan.mouseover(function(e) {
// Insert functionality from template here
});
cloneSpan.mouseout(function(e) {
// Insert functionality from template here
});
cloneSpan.click(function(e) {
// Insert functionality from template here
});