有没有办法让jQuery Sortable处理嵌套？

我正在尝试编写一个用户界面来允许操作一组分层的数据。有没有办法让jQuery Sortable处理嵌套？

层次结构包含“容器”和“组件”元素。一个容器可以包含组件和其他容器。

我希望能够：

重新排序部件/其父容器内的容器
元件拖拽/从一个父容器容器到另一个

jQuery的可排序Widget几乎给我我需要的东西。我可以重新排列容器中的组件，并将组件从一个容器拖到另一个容器中。

但是，当我尝试放置容器元素时，它消失。

我已经浏览了API文档，但找不到任何东西来帮助我。

是否有可能配置jQuery Sortable去做我所需要的？

下面的代码，它也是在jsfiddle（尝试拖动粉红色格）

<!doctype html> 
<html lang="en"> 
<head> 
    <title>jQuery UI Sortable - Connect lists</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <style type="text/css"> 
     .component, .container, .new-component 
     { 
      font-family: Sans-Serif; 
      line-height: 30px; 
      min-height: 30px; 
      margin: 10px; 
      padding: 10px; 
      border: 1px solid #333; 
     } 
     .container 
     { 
      background-color: #eee; 
     } 
     .container > .container 
     { 
      background-color: #fcc; 
     } 
     .component 
     { 
      background-color: #aaa; 
     } 
     .new-component 
     { 
      background-color: #ccd; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(function() { 
      $(".container").sortable({ 
       placeholder: "new-component", 
       connectWith: ".container" 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <div class="container"> 
     <div class="component">Component 1</div> 
     <div class="component">Component 2</div> 
     <div class="component">Component 3</div> 
     <div class="container"> 
      <div class="component">Component 4</div> 
      <div class="component">Component 5</div> 
      <div class="component">Component 6</div> 
     </div> 
    </div> 
</body> 
</html>

[我发现，除去{connectWith：“.container”}选项可以让我重新排序组件/容器的兄弟姐妹，但我失去了在容器之间移动组件的能力。]

来源

2013-09-26 sandy

我想这取决于您要实现的嵌套级别。

如果一个单一的水平就足够了，那么这就可以做到这一点。如果你需要能够更深入地嵌套元素，那么就不会有简单的解决方法。

$(function() { 
    $(".container").sortable({ 
     placeholder: "new-component", 
     //connectWith: ".container" 
    }); 
    $(".container div").sortable({ 
     connectWith: ".container" 
    }) 
});

来源

2013-09-26 22:48:10 rusln

感谢rusln。可悲的是，我需要嵌套到任意深度。 – sandy

嗯，这里迟到了，但这可能会帮助你在正确的方向：http：//www.joezimjs.com/javascript/javascript-design-patterns-composite/ – rusln

哦，如果全部失败，这可能有所帮助：http ：//dbushell.com/2012/06/17/nestable-jquery-plugin/ – rusln

我无谓的战斗使用div元素来表示我的数据的列表一场败仗。

将它全部转换为ul和li元素的窍门。

工作下面的代码和jsfiddle：

<!doctype html> 
<html lang="en"> 
<head> 
    <title>jQuery UI Sortable</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" /> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script> 
    <style type="text/css"> 
     ul 
     { 
      list-style-type: none; 
     } 
     ul, li 
     { 
      margin: 10px; 
      padding: 10px; 
      border: 1px solid #333; 
      min-height: 20px; 
     } 
     ul 
     { 
      background-color: #ccd; 
     } 
     li 
     { 
      background-color: #eef; 
     } 
     li.new 
     { 
      background-color: #fff; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(function() { 
      $("ul").sortable({ 
       placeholder: "new", 
       connectWith: "ul" 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <ul> 
     <li><span>Component 1</span></li> 
     <li><span>Component 2</span> 
      <ul> 
       <li><span>Component 4</span></li> 
       <li><span>Component 5</span></li> 
       <li><span>Component 6</span></li> 
      </ul> 
     </li> 
     <li><span>Component 3</span></li> 
     <li> 
      <span>Component 4</span> 
      <ul> 
       <li><span>Component 4</span></li> 
       <li><span>Component 5</span></li> 
       <li><span>Component 6</span></li> 
      </ul> 
     </li> 
    </ul> 
</body> 
</html>

来源

2013-09-27 09:48:17 sandy

有没有办法让jQuery Sortable处理嵌套？

回答

相关问题