jQuery를 UI

Question

를 사용하여 낙하 할 내에서 정렬 드래그 할 수있는 요소를 확인 해결

그래서 나는 더 많은 비트를 속성 connectWith와 sortable()을 공부하고이 솔루션은 내가 기대했던 것보다 간단했다 발견,하지만 난 종류의 뒤로 때문에 그것에 대해 생각했다 draggable() 및 droppable()입니다.

는 여기에 바이올린입니다 : http://jsfiddle.net/DKBU9/12/

---

원래 질문은 다음과 같습니다

이 내가 별도의 보관해야합니다 느꼈다 이전 SO 질문의 확장입니다.

원래 질문은 jQuery UI - Clone droppable/sortable list after drop event입니다. 복제 된 요소에서 삭제 가능한 핸들러를 다시 초기화하는 것을 고려합니다.

그러나 초기 목록에서 드래그 한 요소가 삭제 가능 목록 내에서 정렬되도록 허용하고 있습니다. SO이 게시물 불평 부풀게 좋아하기 때문에 http://jsfiddle.net/DKBU9/7/

그리고 필요한 코드 : 여기

은 바이올린은 기본적으로 원래의 질문의 결과로 현재 동작을 설명입니다

HTML을

<ul id="draggables"> 

    <li>foo1</li> 
    <li>foo2</li> 
    <li>foo3</li> 

</ul> 

<ul class="droppable new"> 

</ul> 

JS

$(function() { 

    $('#draggables > li').draggable({ 
     appendTo: 'document', 
     revert: 'invalid' 
    }); 

    $('.droppable > li').draggable({ 
     appendTo: 'document', 
     revert: 'invalid' 
    }); 

    $('#draggables').droppable({ 
     accept: '.droppable > li', 
     drop: function(event, ui) { 
      ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this)); 
      cleanUp(); 
     } 
    }); 

    initDrop($('.droppable')); 

}); 

function initDrop($element) { 

    $element.droppable({ 
     accept: function(event, ui) { 
      return true; 
     }, 
     drop: function(event, ui) { 
      if($(this).hasClass('new')) { 
       var clone = $(this).clone();     
       $(this).after(clone); 
       $(this).removeClass('new'); 
       initDrop(clone); 
      } 
      ui.draggable.detach().css({top: 0,left: 0}).appendTo($(this)); 
      cleanUp(); 
     } 
    }).sortable({ 
     items: 'li', 
     revert: false, 
     update: function() { 
      cleanUp(); 
     } 
    }); 

} 

function cleanUp() { 

    $('.droppable').not('.new').each(function() { 
     if($(this).find('li').length == 0) { 
      $(this).remove(); 
     } 
    }); 

} 

참조 질문 : Jquery UI combine sortable and draggable

나는이 문제를 해결하기 위해이 질문을 사용하려고 애썼다. 그 결과는 정확히 내가 얻으려는 것, 특히 수용된 대답의 의견에 제공된 마지막 바이올린이지만 사소한 차이점을 고려하여 코드에 적용하는 방법을 알아낼 수 없습니다. 예를 들어, 그 질문에 바이올린은 실제 요소를 드래그하는 것보다는 draggable을 복제하고 광산과는 달리 요소를 초기 목록으로 다시 드래그 할 수 없습니다.

내 코드에 대한 결과를 얻으려는 모든 도움을 주시면 대단히 감사하겠습니다.

또한이 예제에서 accept 속성은 true를 반환하는 함수로 설정됩니다. 이것에 대한 이유는 무엇입니까? 그것은 단지 어떤 것이나 드래그 가능한 요소를 받아 들일 수 있다는 것을 의미하지 않습니까?

EDIT : connectWith 속성과 함께 sortable()을 사용한 몇 가지 답변을 읽었지 만, 초기 목록을 원하지 않기 때문에 어떤 이유로 필요하다고 생각하지 않았습니다. 정렬 할 수 있습니다. 그러나 sortable()을 사용하는 것만으로도 기능을 사용할 수있게되었지만 아직 모든 이벤트 핸들러를 채택하지 않았습니다.

Answer 1

this fiddle을 참조하십시오.

새 항목에서는 항목을 삭제 및 정렬 할 수 있지만 처음에는 편집 할 수 없습니다.우리가 용기 드래그시에 대해 이동하지 않도록() 복제를 사용하는 자리 표시자를 떠날 필요하기 때문에 드래그를 시작으로

1), 나는 새로운 기능을 추가 :

몇 가지 트릭이있다 우리는 새로운 요소를 draggable로 초기화해야합니다.

function initDraggable($element) 
{ 
    $($element).draggable({ 
     connectToSortable: '.droppable',  
     revert: function(droppableObj) 
     { 
      if(droppableObj === false) 
      {     
       $(this).removeClass('dragging'); 
       return true; 
      } 
      else 
      {    
       return false; 
      } 
     }, 
     helper: 'clone', 
     start: function(e, ui) 
     {   
      $draggingParent = $(this).parent(); 
      $(this).addClass('dragging'); 
     } 
    }); 
} 

주 .droppable와 connectToSortable: (정리, 나는 당신이 정렬 할 수있는에 낙하 할 변경해야한다고 생각)

참고 : revert: - 이렇게하면 되돌릴 때 '드래그'클래스 (원래 (복제 된) 요소가 보이지 않게됩니다)를 제거 할 수 있습니다.

마지막으로 드래그 중에 원본 (복제 된) 요소를 보이지 않게 만드는 '끌기'클래스가 추가 된 start이 있습니다. 또한 항목이 #draggables 또는 .droppables에서 드래그되고 있는지 확인하는 데 사용되는 $ draggingParent를 설정합니다.

2)이어서 거기 #draggables 대한 droppable()이다 :이 요소 #draggables 또는 .droppables에서 삭제되어 있는지 여부를 검사 drop 핸들러 따라서 작용한다는

$("#draggables").droppable({  
    drop: function(ev, ui) { 
     if($draggingParent[0] === $(ui.helper).parent()[0]) 
     { 
      //dragged from draggables to draggables 
      $(ui.draggable).removeClass('dragging'); 
     } 
     else 
     {    
      if(ui.draggable.parent()) 
      var $clone = $(ui.draggable).clone(); 
      $(ui.draggable).remove(); 
      $clone.removeClass(); 
      $clone.removeAttr('style'); 
      initDraggable($clone); 
      $(this).append($clone);   
     } 
    } 

참고. 이미 언급 한 바와 같이

3) 마지막으로, 우리는 정말 낙하 할을 정렬 할 것을 권장합니다

function initDroppableSort($element) {  
    $element.sortable({ 
     items: 'li', 
     connectWith: ".droppable,#draggables", 
     revert: true, 
     stop: function(event, ui) { 
      $(ui.item).removeClass('dragging'); 
      $('.dragging').remove(); 
      if($(this).hasClass('new')) { 
       var clone = $(this).clone();     
       clone.empty(); 
       $(this).after(clone); 
       $(this).removeClass('new'); 
       initDroppableSort(clone); 
      }    
      cleanUp(); 
     } 
    }); 

} 

참고 connectWith 특히이 .droppable 및 #draggables 모두를 의미있다.