[JQUERY] jQuery를 정렬 가능한 - 선택 및 드래그 여러 목록 항목

jQuery를 정렬 가능한 - 선택 및 드래그 여러 목록 항목

해결법

1. ---

   1.나는 정렬하여이 작업을하지 않아도,하지만 난 드래그 & 드롭 가능한 사용했다. 난 당신이 필요로하는 모든 기능을 포함인지는 모르겠지만, 그것은 좋은 시작 (데모 여기)해야한다 :

   나는 정렬하여이 작업을하지 않아도,하지만 난 드래그 & 드롭 가능한 사용했다. 난 당신이 필요로하는 모든 기능을 포함인지는 모르겠지만, 그것은 좋은 시작 (데모 여기)해야한다 :

   HTML

   <div class="demo">
       <p>Available Boxes (click to select multiple boxes)</p>    
       <ul id="draggable">
           <li>Box #1</li>
           <li>Box #2</li>
           <li>Box #3</li>
           <li>Box #4</li>
       </ul>
   
       <p>My Boxes</p>
       <ul id="droppable">
       </ul>
   
   </div>
   

   스크립트

   $(document).ready(function(){
   
       var selectedClass = 'ui-state-highlight',
           clickDelay = 600,     // click time (milliseconds)
           lastClick, diffClick; // timestamps
   
       $("#draggable li")
           // Script to deferentiate a click from a mousedown for drag event
           .bind('mousedown mouseup', function(e){
               if (e.type=="mousedown") {
                   lastClick = e.timeStamp; // get mousedown time
               } else {
                   diffClick = e.timeStamp - lastClick;
                   if ( diffClick < clickDelay ) {
                       // add selected class to group draggable objects
                       $(this).toggleClass(selectedClass);
                   }
               }
           })
           .draggable({
               revertDuration: 10, // grouped items animate separately, so leave this number low
               containment: '.demo',
               start: function(e, ui) {
                   ui.helper.addClass(selectedClass);
               },
               stop: function(e, ui) {
                   // reset group positions
                   $('.' + selectedClass).css({ top:0, left:0 });
               },
               drag: function(e, ui) {
                   // set selected group position to main dragged object
                   // this works because the position is relative to the starting position
                   $('.' + selectedClass).css({
                       top : ui.position.top,
                       left: ui.position.left
                   });
               }
           });
   
       $("#droppable, #draggable")
           .sortable()
           .droppable({
               drop: function(e, ui) {
                   $('.' + selectedClass)
                    .appendTo($(this))
                    .add(ui.draggable) // ui.draggable is appended by the script, so add it after
                    .removeClass(selectedClass)
                    .css({ top:0, left:0 });
               }
           });
   
   });
   

2. ---

   2.TL; DR : 작업 대답이 바이올린을 참조하십시오.

   TL; DR : 작업 대답이 바이올린을 참조하십시오.

   나는 연결된 정렬로 정렬에서 여러 선택한 항목을 드래그의 문제에 대한 해결책 사방을보고, 이러한 답변은 내가 찾을 수있는 최선이었다.

   하나...

   허용 대답은 버그이며, @ Shanimal의 대답은 가깝지만 아주 완료되지 않습니다. 나는 Shanimal의 코드 @ 가져다가 그 위에 만들었습니다.

   나는 고정 :

   나는 추가 :

   깡깡이

   HTML :

   <ul>
       <li>One</li>
       <li>Two</li>
       <li>Three</li>
   </ul>
   <ul>
       <li>Four</li>
       <li>Five</li>
       <li>Six</li>
   </ul>
   

   (jQuery를 및 jQuery를 UI로) 자바 스크립트 :

   $("ul").on('click', 'li', function (e) {
       if (e.ctrlKey || e.metaKey) {
           $(this).toggleClass("selected");
       } else {
           $(this).addClass("selected").siblings().removeClass('selected');
       }
   }).sortable({
       connectWith: "ul",
       delay: 150, //Needed to prevent accidental drag when trying to select
       revert: 0,
       helper: function (e, item) {
           var helper = $('<li/>');
           if (!item.hasClass('selected')) {
               item.addClass('selected').siblings().removeClass('selected');
           }
           var elements = item.parent().children('.selected').clone();
           item.data('multidrag', elements).siblings('.selected').remove();
           return helper.append(elements);
       },
       stop: function (e, info) {
           info.item.after(info.item.data('multidrag')).remove();
       }
   
   });
   

   노트:

   나는이 게시 된 이후, 나는 뭔가에 simmilar을 구현 - 다중 선택 기능과 더불어, 정렬에 드래그 목록 항목을 연결. jQuery를 UI 위젯이 너무 비슷하기 때문에 그것은 거의 정확하게 동일하게 설정됩니다. 하나의 UI 팁은 드래그를 시작하지 않고 여러 항목을 선택하기 위해 클릭 할 수 있도록의 draggables 또는 selectables에 대한 지연 매개 변수가 설정되어 있는지 확인하는 것입니다. 그런 다음 선택한 요소를 함께 넣어 모두 같은 외모 (새로운 요소, 복제 선택한 항목을 확인하고 그들을 추가),하지만 기능까지 그렇지 않으면 나사 (그대로 원본 항목을두고 있는지 확인하는 도우미를 구성 - 내가 말할 수 없다 이유를 정확하게,하지만 실망 DOM 예외를 많이 포함).

   또한, Shift + 클릭 기능을 추가 그래서 더 기본 데스크톱 응용 프로그램과 같은 그 기능을합니다. 나는 더 자세히 이것에 상세히 설명 할 수 있도록 블로그를 시작해야 할 수도 있습니다 :-)

3. ---

   3.JSFiddle : http://jsfiddle.net/hQnWG/

   JSFiddle : http://jsfiddle.net/hQnWG/

   <style>
       ul {border:1px solid Black;width:200px;height:200px;display:inline-block;vertical-align:top}
       li {background-color:Azure;border-bottom:1px dotted Gray}   
       li.selected {background-color:GoldenRod}
   </style>
   <h1>Click items to select them</h1>
   <ul>
       <li>One</li>
       <li>Two<li>
       <li>Three</li>
   </ul><ul>
       <li>Four</li>
       <li>Five<li>
       <li>Six</li>
   </ul>
   <script>
       $("li").click(function(){
           $(this).toggleClass("selected");
       })
       $("ul").sortable({
           connectWith: "ul",
           start:function(e,info){
               // info.item.siblings(".selected").appendTo(info.item);
               info.item.siblings(".selected").not(".ui-sortable-placeholder").appendTo(info.item);
   
           },
           stop:function(e,info){
               info.item.after(info.item.find("li"))
           }
       })
   </script>
   

4. ---

   4.그에 대한 UI를 jQuery 플러그인이있다 : https://github.com/shvetsgroup/jquery.multisortable

   그에 대한 UI를 jQuery 플러그인이있다 : https://github.com/shvetsgroup/jquery.multisortable

   jsFiddle : http://jsfiddle.net/neochief/KWeMM/

   $('ul.sortable').multisortable();
   

5. ---

   5.아론 Blenkush의 솔루션은 중대한 오류가 있습니다 제거하고 정렬 목록 나누기 구조에 항목을 추가하는; 다른 기능 목록을 처리 할 경우 새로 고칠 수 있습니다 도움이 있지만, 그들 모두를위한 트리거는 새로 고칠 필요하고 그것은 모두 지나치게 복잡하게된다.

   아론 Blenkush의 솔루션은 중대한 오류가 있습니다 제거하고 정렬 목록 나누기 구조에 항목을 추가하는; 다른 기능 목록을 처리 할 경우 새로 고칠 수 있습니다 도움이 있지만, 그들 모두를위한 트리거는 새로 고칠 필요하고 그것은 모두 지나치게 복잡하게된다.

   유래에 몇 가지 솔루션을 분석 한 후, 나는 다음에 내 요약했다 :

   이미 기본적으로 도우미 인 ui.item을 가지고 원인, 사용 스타트 기능 - 도우미를 사용하지 마십시오.

       start: function(event, ui){
           // only essential functionality below
   
           // get your own dragged items, which do not include ui.item;
           // the example shows my custom select which selects the elements
           // with ".selected" class
           var dragged = ui.item.siblings(arr["nested_item"]).children('.tRow.tSelected').parent(arr["nested_item"]);
   
           // clone the dragged items
           var dragged_cloned = dragged.clone();
   
           // add special class for easier pick-up at update part
           dragged_cloned.each(function(){$(this).addClass('drag_clone');});
   
           // record dragged items as data to the ui.item
           ui.item.data('dragged', dragged);
   
           // hide dragged from the main list
           dragged.hide();
   
           // attached cloned items to the ui.item - which is also ui.helper
           dragged_cloned.appendTo(ui.item);
           },
   

   정지 기능이 업데이트 기능의 일부 복사본이 필요하지만, 가능성이 갱신 분리 될 수있다 '원인없이 변경하는 경우 - 서버에 아무것도 제출하지 않습니다.

   추가 : 드러그 한 아이템의 순서를 유지.

from https://stackoverflow.com/questions/3774755/jquery-sortable-select-and-drag-multiple-list-items by cc-by-sa and MIT license