Question

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

相对于其他div / words（即排序）拖动到不同的顺序
在其框的右上角显示X（仅在悬停时可见），以便在点击时将其完全删除
点击操作后更改字体/文字
在用户希望添加其他字词时插入页面

例如，假设这是页面（引号表示一个元素）：

“嗨，我的名字是”[文本框] “我工作......”“我出生在”[组合框]

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

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

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

任何提示都将不胜感激。

Answer 1

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

在我没有看到任何宏计划实施之前没有完成这个确切的事情，我只是逐步添加功能，直到你到达你需要去的地方。你可能不得不在整个过程中重构一些事情，但我可能不必告诉你。 ;）

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

关于UI行为的描述，您可以说可以拖动非活动元素，并通过单击它们使它们处于活动状态。你可以这样做（只是看看鼠标上是否有东西被拖动以知道是拖动还是点击）但它可能不是最好的UI设计选择，IMO。这不会是世界上最糟糕的事情，但是当我尝试做某事时，当发生错误的事情时，我觉得有点令人沮丧。当然，为自己实施和观察可能是最好的。

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>

快速说明：事件上的跨度鼠标告诉jquery淡入删除按钮（因此当您悬停时，删除按钮变为可用）。

跨度鼠标输出事件告诉jquery在不再需要时淡出删除按钮（因此当您将鼠标移离li时，删除按钮将不再可见）

跨度的onclick用包含span的内容的文本框替换span。我会将“保存更改”作为阅读器的练习，因为它基本上是相同的但反过来。

Img标签样式有display：none最初隐藏它。这基本上是fadeOut（）的最终产品，但没有淡入淡出。

删除按钮的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事件更改外部span的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
});

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

2 个答案: