Jquery UI Sortable 여러 항목이 거의 작동 하나 나머지 문제가 하나 남았습니다.

Question

두 개의 정렬 된 정렬 가능 항목이 있는데,이 두 항목 사이를 드래그하면됩니다. 한 번에 두 개 이상 드래그해야했기 때문에 선택한 항목을 event.item에 추가하여 다음과 같은 작업을 수행했습니다.

$(this).sortable({ 
     connectWith: ".stage-content", 
     placeholder: 'placeholder', 
     start: function(ui, e) { 
      e.item.siblings(".selected").appendTo(e.item); 
.... 

두 개의 드롭 존 중 하나 유혹하지 않을 때 내가 알아낼 수 없습니다 문제는 자리는 내가 드래그하고있는 요소 내에서 끝납니다. 이 시간에 놓아두면 사라집니다.

HierarchyRequestError : 노드 완벽 의미가 계층 구조

에 지정된 점에 삽입 할 수없는,하지만 난의 해결책이 무엇인지 모르고, 어떤 도움에 감사드립니다! 하단

http://jsfiddle.net/mstefanko/kxBUG/

Answer 1

은 예시와 jsfiddle이다. 희망이 도움이됩니다.

$(document).ready(function(){ 
       $(".droppable").droppable({ 
        drop: function(event, ui) { 
         var $list = $(this); 
         $helper = ui.helper; 
         $($helper).removeClass("selected"); 
         var $selected = $(".selected");     
         if($selected.length > 1){      
          moveSelected($list,$selected); 
         }else{ 
          moveItem(ui.draggable,$list); 
         }          
        }, tolerance: "touch" 
       }); 

       $(".draggable").draggable({ 
        revert: "invalid", 
        helper: "clone", 
        cursor: "move", 
        drag: function(event,ui){ 
         var $helper = ui.helper; 
         $($helper).removeClass("selected"); 
         var $selected = $(".selected"); 
         if($selected.length > 1){ 
          $($helper).html($selected.length + " items"); 
         }          
        } 
       }); 

       function moveSelected($list,$selected){ 
        $($selected).each(function(){ 
         $(this).fadeOut(function(){ 
          $(this).appendTo($list).removeClass("selected").fadeIn(); 
         });     
        });    
       } 

       function moveItem($item,$list) { 
        $item.fadeOut(function() { 
         $item.find(".item").remove(); 
         $item.appendTo($list).fadeIn(); 
        }); 
       } 

       $(".item").click(function(){ 
        $(this).toggleClass("selected"); 
       }); 

      }); 

http://jsfiddle.net/caferdo/k5XJv/3/

Answer 2

당신은 스타트 기능에 $(YOUR SORTABLE OBJECT).sortable("refresh")을 추가해야합니다.

$(this).sortable({ 
     connectWith: ".stage-content", 
     placeholder: 'placeholder', 
     start: function(ui, e) { 
      e.item.siblings(".selected").appendTo(e.item); 
      $(YOUR SORTABLE OBJECT).sortable("refresh");} 
...