有沒有辦法讓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處理嵌套？

回答

相關問題