在 HTML/JS/JQueryUI 的文本框中显示内容树

Question

我正在开发一个程序来操作内容树。请看下面：

Parent1
    Child1
    Child2
Parent2
    Child3
Parent3
    Child4

我想在基于 JQueryUI 的页面上显示它，用户可以通过将“子”拖放到另一个父级来以图形方式操作此树。例如，如果用户可以将“Child2”拖到“Parent3”，在这种情况下，Child2 现在将出现在 Parent3 下 - 如图所示缩进。此外，用户可以添加新的 Child5 并指定关联的 Parent 等。因此，可以将新实体动态添加到列表中（适当的缩进）。

对于这些人来说，最好的组件是什么？我尝试了以下类似的方法，但它有一些问题。 textinput 是一个固定宽度，并且不会只换行到文本的大小，如果您单击 textinput，则会出现闪烁的光标（我只是希望它是输出文本），并且可拖动由于某种原因无法正常工作.

HTML：

<div id="container" class="ui-widget-content">
<h3 class="ui-widget-header">Containment</h3>
<span id="draggable">  
    <input type="text" id="parent1" class="ui-state-active" value="Parent1" readonly>
    <br>
    <input type="text" id="child1" class="ui-state-active" value="Child1" readonly>
</span>
</div>

Javascript：

$(function() {
     $( "#parent1" ).draggable({containment: "#container"});
     $( "#child1" ).draggable({containment: "#container"});
});

我还希望大容器框的大小是固定的，并且不依赖于容器框中列表的长度。谢谢大家。

Answer 1

您可以使用<ul> or <li>。这是基本的 HTML。
在<li> 你可以放置任何你想要的东西。例如链接或输入。试试看！
你可以在这里找到一个例子：http://jsfiddle.net/2q9towgz/