jQuery Sortable 중첩 처리를 수행 할 수있는 방법이 있습니까?

나는 계층 적 데이터 집합을 조작 할 수있는 UI를 작성하려고합니다.jQuery Sortable 중첩 처리를 수행 할 수있는 방법이 있습니까?

계층 구조에는 '컨테이너'및 '구성 요소'요소가 포함되어 있습니다. 컨테이너에는 구성 요소 및 기타 컨테이너가 포함될 수 있습니다.

나는 수 있도록하고 싶습니다 : 자신의 부모 컨테이너 내의

재 주문 부품/용기
드래그 구성 요소/다른

jQuery의 정렬 가능한 하나 개의 부모 컨테이너에서 컨테이너 위젯은 내가 필요로하는 것을 거의 제공합니다. 컨테이너 내에서 구성 요소를 다시 정렬하고 한 컨테이너에서 다른 컨테이너로 구성 요소를 드래그 할 수 있습니다. 난 컨테이너 요소를 삭제하려고 할 때

그러나, 그것은 사라진다.

나는 API 문서를 통해 살펴 했어,하지만 나를 도와 아무것도 찾을 수 없습니다.

은 내가 무엇을해야 할 jQuery를 정렬 가능한을 구성 할 수 있습니까? 옵션은 내가 다시 명령 할 수 있습니다 : 여기

그것은

<!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>

[I가 { ".container"connectWith}을 제거하는 것으로 나타났습니다 (분홍색 사업부를 끌어 시도) jsfiddle에도의 코드입니다 구성 요소/컨테이너 형제,하지만 난 용기 사이에 구성 요소를 이동할 수있는 기능을 잃게됩니다.]

출처

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 및 선형 요소에 모든 변환

트릭을했다.

아래의 코드 작업과 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 중첩 처리를 수행 할 수있는 방법이 있습니까?

답변

관련 문제