如何制作可排序、可更改、可添加、可移动的网页元素？

Question

我正在创建一个网络应用程序界面，允许用户通过单击单词/短语来构建句子。短语的每个单词将包含在其自己的页面元素中，例如。一个

。因此，div 类需要允许：

• 拖动到相对于其他 div/单词的不同顺序（即排序），
• 在其框的右上角添加一个 X（仅在悬停时可见），以在单击
• 更改 点击操作时的字体/文本
• 时将其完全删除当用户希望添加另一个单词时，

会被插入到页面中例如，假设这是页面（引号表示一个元素）：

“嗨，我的名字是” [Textbox] “I work at...” “and I wasborn in” [Combobox]

斜体短语是“非活动”，不是句子的一部分，但如果用户单击它，它将更改为“我工作”[文本框]，并且将添加一个新的 div，例如。 “而且还在...”以允许进一步扩展。粗体短语将有一个关闭按钮/可单击操作来删除它们或使它们再次处于非活动状态。此外，它们还可以通过拖动来更改顺序。正如您所看到的，我还需要动态插入新的文本框和组合框以容纳更多需要输入的短语。

有人可以简要介绍一下我需要采取哪些步骤吗？我在 JQuery 中见过可排序的列表元素，例如。 http://jsfiddle.net/ctrlfrk/A4K4t/ 这是一个开始。我只需要用一些基本的 JavaScript 和 CSS 来修饰它吗？或者我是否需要使用服务器端脚本来动态添加更多页面内容？

总而言之，我需要 div 在单击时更改字体/文本，有一个悬停在关闭按钮上的按钮，在简单的单击事件上删除和插入，并且可以通过拖动进行排序。我还需要并行添加/删除组合框/文本框。

任何提示将不胜感激。

Answer 1

除非新内容是在服务器上存储或生成的，否则您不需要服务器。

在我没有看到任何要实施的宏伟计划之前，我没有完成这件事，我只会逐步添加功能，直到您到达需要去的地方。您可能必须在此过程中稍微重构一些东西，但我可能不必告诉您这一点。 ;)

添加或删除元素时必须做的一件事是重新绑定 jQuery 函数，仅在文档加载时调用它们是不够的。因此，将它们放入一个函数中，并在添加或删除元素时调用它。

关于您对 UI 行为的描述，您说可以拖动非活动元素，并且可以通过单击它们将它们激活。你可以这样做（只需查看鼠标是否已被拖动，即可知道是拖动还是单击），但在我看来，它可能不是最好的 UI 设计选择。这不会是世界上最糟糕的事情，但当我尝试做某事时发生错误的事情时，我发现有点令人沮丧。当然，亲自实施和观察可能是最好的。

Answer 2

排序：
我将在无序列表 (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 鼠标移出事件告诉 jquery 在不再需要时淡出删除按钮（因此，当您将鼠标移离 li 时，删除按钮不再可见）

Span 的 onclick 会用包含以下内容的文本框替换 Span跨度的内容。我将把“保存更改”作为读者的练习，因为它本质上是相同的，但方向相反。

Img 标签样式具有 display: none 来最初隐藏它。这本质上是 fadeOut() 的最终产品，但没有淡入淡出。

删除按钮的单击事件获取父项（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
});