jQuery를 드래그하고 드롭 가능한 수용하고 되돌아 문제 여기

Question

예제 코드 : http://jsfiddle.net/pDuxe/

나는 두 draggable 요소가있는 droppable 공간이있다. 나는 두 가지 문제가 : 다음 시도하고 상단에 두 번째 항목을 드롭하면 droppable 지역은 이미 그 안에 draggable 항목이있는 경우

1. 을, 나는 그것이 refused로 원래 위치로 다시 되돌려 야 .

2. 나는 문제없이 revert: 'invalid' 코드를 사용 할 수 있습니다,하지만 난 droppable 영역으로 draggable 항목을 배치하고 싶은 경우에 그것을 다시 이동 - 원래를가 droppable 지역에 다시 그 자리로 되 돌리는 유지하지 위치.

그렇다면이 두 가지 상황을 어떻게 달성 할 수 있습니까?

<div id="originalposition"> 
    <div id="draggable" class="ui-widget-content"> 
     <p>Drag me to my target</p> 
    </div> 

    <div id="draggable2" class="ui-widget-content"> 
     <p>Drag me to my target</p> 
    </div> 
</div> 

그런 다음 다음과 같은 작업을 수행 할 수 있습니다 :

$(function() { 
    $("#draggable").draggable({ revert: 'invalid' }); 
    $("#draggable2").draggable({ revert: 'invalid' }); 
    $("#originalposition").droppable({ 
     drop: function(event,ui) { 
       $("#droppable").removeClass("ui-state-highlight").addClass("ui-widget-header").html("<p>Drop here</p>"); 
       } 
    }); 
    $("#droppable").droppable({ 
     drop: function(event, ui) { 
       $(this).addClass("ui-state-highlight").find("p").html("Dropped!"); 
       }, 
     accept: function(dropElem) { 
       //dropElem was the dropped element, return true or false to accept/refuse it 
       return (!$(this).hasClass("ui-state-highlight") && $(dropElem).hasClass("ui-widget-content")); 
       } 
    }); 
});​ 

Fiddle here을 할 수있는 일

Answer 1

당신은 또한 droppable을하는 div에 draggables 포장입니다.