jQuery UI에서 여러 정렬 가능한 목록을 서로 연결하려면 어떻게해야합니까?

StackOverflow https://stackoverflow.com/questions/307411

문제

나는 jQuery를 처음 접했고 jQuery UI의 사용에 완전히 어려움을 겪고 있습니다. sortable.

항목의 그룹화 및 순서를 용이하게하기 위해 페이지를 구성하려고합니다.

내 페이지에는 그룹 목록이 있으며 각 그룹에는 항목 목록이 포함되어 있습니다. 사용자가 다음을 수행 할 수 있도록하고 싶습니다.

  1. 그룹을 재정렬하십시오
  2. 그룹 내 항목을 재정렬하십시오
  3. 그룹간에 항목을 이동하십시오

처음 두 가지 요구 사항은 문제가되지 않습니다. 나는 그것들을 잘 분류 할 수 있습니다. 문제는 세 번째 요구 사항과 함께 제공됩니다. 나는 그 목록을 서로 연결할 수 없습니다. 일부 코드가 도움이 될 수 있습니다. 여기 마크 업이 있습니다. 

<ul id="groupsList" class="groupsList">  
  <li id="group1" class="group">Group 1  
    <ul id="groupItems1" class="itemsList">  
      <li id="item1-1" class="item">Item 1.1</li>  
      <li id="item1-2" class="item">Item 1.2</li>  
    </ul>  
  </li>
  <li id="group2" class="group">Group 2  
    <ul id="groupItems2" class="itemsList">  
      <li id="item2-1" class="item">Item 2.1</li>  
      <li id="item2-2" class="item">Item 2.2</li>  
    </ul>  
  </li>
  <li id="group3" class="group">Group 3  
    <ul id="groupItems3" class="itemsList">  
      <li id="item3-1" class="item">Item 3.1</li>  
      <li id="item3-2" class="item">Item 3.2</li>  
    </ul>  
  </li>
</ul>

나는 넣어 목록을 정렬 할 수 있었다 $('#groupsList').sortable({}); 그리고 $('.itemsList').sortable({}); 에서 document ready function. 나는 사용 시도했다 connectWith 옵션 sortable 그것을 작동시키기 위해, 그러나 나는 훌륭하게 실패했습니다. 내가하고 싶은 것은 모든 것이 있습니다 groupItemsX 모든 것에 연결된 목록 groupItemsX 나열하지만 그 자체. 어떻게해야하나요?

나는 구체적으로 목록을 그 자체로 연결하지 않아야한다고 생각했다. 물론, 나는 Excel과 함께 일하지는 않지만 스택 오버플로 등을 유발할 수있는 일종의 끝없는 재귀를 일으킬 수있는 것처럼 보였습니다. 흠. 말장난에 대해 죄송합니다. 나 자신을 도울 수 없었다.

어쨌든, 나는 이런 일을하려고했는데 효과가 없었습니다. 

$('.groupsList').sortable(); // worked great  
$('.groupsList').each( function () {  
    $(this).sortable( {  
        connectWith: ['.groupsList':not('#'+ $(this).attr('id') )];  
    });  
});

나는 구문을 완전히 엉망으로 만들었을 것이라고 확신하며, 그것이 내가 처음에 질문을 해야하는 이유라고 생각합니다. 현재 항목을 목록에서 필터링하는 것이 필요하거나 유용한 성능이 좋습니까?

Adam과 Jimmyp이 제공 한 모든 답변은 IE에서 근무했습니다 (다시는 Firefox에서는 실제로 이상하게 행동하지만 재조정을 시도 할 때 목록 항목을 덮어 씁니다). 나는 당신의 답변 중 하나를 받아들이고 다른쪽에 대한 투표를 할 것입니다. 그러나 필터링에 대한 아이디어/ 제안이 있다면 듣고 싶습니다.

도움이 되었습니까?

해결책

사용한 구문을 포함시킬 수 있습니까? connectWith? 괄호 안에 다른 그룹 목록을 배치 했습니까 (선택기이더라도)? 그건:

...sortable({connectWith:['.group'], ... }

다른 팁

이것은 작동해야합니다 :

$('#groupsList').sortable();
$('.itemsList').sortable({
    connectWith: $('.itemsList')
});

 $(function() {
            $( "#groupItems1, #groupItems2, #groupItems3" ).sortable({
                connectWith: ".itemsList"
            }).disableSelection();
        });

이것은 당신을 위해 모두 잘 될 것입니다! 저를 위해 똑같이하고 있습니다. HTML에서 변경이 필요하지 않습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top