如何向<li>元素添加行</li>

Question

我正在尝试创建一个树视图或类似的东西。我的问题是我没有任何想法如何拖动这样的行：

这是我的代码：

<ul>
   <li>el1
     <ul>
        <li>el1.1
          <ul>
            <li>el1.1.1</li>
          </ul>
        </li>
        <li>el1.2</li>
     </ul>
  </li>
  <li>el2</li>
</ul>

等等。有可能用css做我想做的事吗？我搜索了4个小时，但没有找到任何东西。 PS：我对css一点都不擅长。

另外，另一个问题是：js可以创建树视图吗？只是简单的js，而不是复杂的插件或类似的东西。

Answer 1

尝试：http://jsbin.com/qalir/1/edit

ul{
    padding:0;
    list-style:none;
    border-left:1px solid #444;
}
ul li{
    padding-left:15px;
    position:relative; /* to allow :before pseudo element be absolute */
}
ul li:before{
    content:" ";
    height:1px;
    width:15px;        /* same as LI's padding */
    background:#444;
    position:absolute;
    top:0.7em;         /* ~half line-height */
    left:0px;          /* to properly align left */
}