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

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

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을 변경할 필요가 없습니다.

언급URL : https://stackoverflow.com/questions/307411/how-do-i-connect-multiple-sortable-lists-to-each-other-in-jquery-ui