jQuery UI 다중 Droppable - 전체 div 요소 드래그 및 복제

Question

jQuery UI를 사용하여 div를 테이블의 열로 드래그하기 시작했습니다. 나는 다른 배경색과 텍스트를 가진 몇 가지 다른 드래그 가능한 div를 가지고 있으며, 복제본으로 드롭 영역까지 드래그 할 수 있어야합니다. 이것은 jQuery UI의 장바구니 코드 예제를 사용하여 정상적으로 작동하지만 텍스트를 편집하는 대신 전체 객체를 드래그하여 편집했습니다. 그러나 이렇게하면 도우미가 있더라도 어떤 이유로 복제 기능이 제거됩니다. 복제 :

<script> 
$(function() { 
    $("ul li").draggable({ 
     appendTo: "body", 
     helper: "clone"}); 
    $(".day #drag").draggable({ 
     appendTo: "body"}); 
    $(".day").droppable({ 
     activeClass: "ui-state-hover", 
     hoverClass: "ui-state-active", 
     accept: ":not(.ui-sortable-helper)", 
     drop: function(event, ui) { 
      var targetElem = $(this).attr("id"); 

      $(this).addClass("ui-state-highlight"); 
      $(ui.draggable).appendTo(this); 
     } 
    }).sortable({ 
     items: "li:not(.placeholder)", 
     sort: function() { 
      $(this).removeClass("ui-state-default"); 
     } 
    }); 
}); 
</script> 

예 열 :

<td> 
    <div id="monday" class="day monday ui-widget-content"></div> 
</td> 

드래그 가능한 요소 :

<li><div style="background-color:#<?=$bgColor?>;color:<?=$textColor?>;" id="drag" class="<?=$subject?>"><?=$row['name']?></div></li> 

그것은 본질적으로 시간표 설정 도구의

여기 내 코드입니다. jsFiddle는 참조 용으로 도움이 여기에

주셔서 감사합니다 : 그것은 정확하게 당신이 원하는,하지만 여기에 대한 좋은 시작이다 http://jsfiddle.net/x5T4h/

Answer 1

확실하지 않음 것을 : 기본적으로 http://jsfiddle.net/x5T4h/2/

, 내가 제거 두 번째 draggable 객체 선언, 나는 drop 이벤트 $(ui.draggable).clone().appendTo(this);

$(function() { 
    $("ul li").each(function(){ 
     $(this).draggable({ 
      helper: "clone" 
     }); 
    }); 

    $(".day").droppable({ 
     activeClass: "ui-state-hover", 
     hoverClass: "ui-state-active", 
     accept: ":not(.ui-sortable-helper)", 
     drop: function(event, ui) { 
      var targetElem = $(this).attr("id"); 
      $(ui.draggable).clone().appendTo(this); 
     } 
    }).sortable({ 
     items: "li:not(.placeholder)", 
     sort: function() { 
      $(this).removeClass("ui-state-default"); 
     } 
    }); 
});​