jQuery droppables - 드롭 요소 변경

Question

저는 jQuery에 조금 익숙해 누군가가 나를 도울 수 있기를 바랍니다.

(li)을 삭제 한 후에 다른 요소 (div)로 요소 (li)을 변경하려고합니다.

샘플 코드 : 제가

drop: function(ev, ui) { 
    $(ui.draggable).replaceWith("<div>Some content</div>"); 
} 

상기 기능이 트리거 될 때 원래 드래그 요소가 비활성화 될 때를 사용

$("#inputEl>li").draggable({ 
    revert: true, 
    opacity: 0.4, 
    helper: "clone" 
}); 
$("#dropEl") 
    .droppable({ 
     accept: ".drag", 
     hoverClass: "dropElhover", 
     drop: function(ev, ui) { 
      // change the li element to div here 
     } 
}); 

문제가있다.

저는 최신 jQuery 및 jQuery UI 안정 버전을 사용하고 있습니다.

Answer 1

원래 목록을 그대로 유지하고 목록 항목을 dropEl에 드롭하면됩니다. 이것에 대해 어떻게 :

drop: function(ev, ui) { 
     $(ui.draggable).replaceWith("<div>Some content</div>"); 
     $("#inputEl>div").draggable({ 
      revert: true, 
      opacity: 0.4, 
      helper: "clone" 
     }); 
    } 

원래 드래그 전화 : 당신은 div 요소를 사용하여 목록 요소를 대체 할 또한 드래그 div 요소가있는 경우

는

drop: function(ev,ui) { 
    $(this).append("<div>Some content</div>"); 
} 

또는, 당신이 시도 할 수 그것이 호출 될 때만 아이템을 드래그 가능하게 만든다. 요소를 변경하거나 추가하고 드래그 할 수있게하려면 draggable() 함수를 다시 호출해야합니다.

Answer 2

고맙습니다.

귀하의 첫 번째 코드는 일, 플러스 나는 또한이 같은 낙하 할에서 div의를 정렬 할 수 있습니다

drop: function(ev, ui) { 
    $(this).append("<div>Some content</div>"); 
    $("#dropEl").sortable(); 
} 

이제 문제는 내가 div의로 변경 한 번있는 어떤 목록을 알고 어떻게 ?

drop: function(ev, ui) { 
      revert: true; 
      var this_id = $(ui.draggable).attr("id"); 
      $(this).append('<div id="'+this_id+'">Some content</div>'); 
      $("#dropEl").sortable(); 
     } 

:

나는 각 요소의 ID를 얻기 위해 다음 코드를 사용하여