두 개의 드롭 대상으로 드래그 앤 드롭

Question

드래그 앤 드롭의 예를 찾고 있는데 여기에는 드래그 항목에 두 개의 분리 가능 영역이 일치해야하는 두 개의 별개 영역이 있습니다.

예 :

나는 그것의 붉은 아이들의 각각의 녹색 영역에 착륙 위치에서 삭제하지 않으면 되돌릴 파란색 드래그 항목을하고 싶습니다.

이상적으로 jquery UI를 사용하고 싶습니다. 그러나 모든 자바 스크립트 라이브러리는 괜찮을 것입니다. 미리 감사드립니다.

Answer 1

draggable/droppable 옵션을 조합하여이 작업을 수행 할 수 있습니다. 주어진 HTML은 다음과 같습니다.

<div id="blue" class="valid"> 
    <div id="red-one" class="red"></div> 
    <div id="red-two" class="red"></div> 
</div> 

<div id="green-container"> 
    <div id="green-one" class="green"> 
    </div> 
    <div id="green-two" class="green"> 
    </div> 
</div> 

(CSS를 생략하면 몇 가지 규칙이 추가됩니다. 아래의 피들을 참조하십시오).

당신은 다음과 같은 자바 스크립트를 작성할 수 있습니다

function isInside(one, other) { 
    return one.offset().left >= other.offset().left && 
     one.offset().top >= other.offset().top && 
     one.offset().top + one.height() <= other.offset().top + other.height() && 
     one.offset().left + one.width() <= other.offset().left + other.width(); 
} 

$("#blue").draggable({ 
    drag: function(event, ui) { 
     var $this = $(this); 
     var $reds = $this.children(".red"); 
     var $greens = $("#green-container").children(".green"); 
     var firstRed = $reds.first(); 
     var firstGreen = $greens.first(); 
     var secondRed = $reds.last(); 
     var secondGreen = $greens.last(); 

     if (isInside(firstRed, firstGreen) && isInside(secondRed, secondGreen)) { 
      $this.addClass('valid'); 
     } 
     else { 
      $this.removeClass('valid'); 
     }  
    }, 
    revert: 'invalid' 
}); 


$("#green-container").droppable({ accept: ".valid" }); 

여기를 체크 아웃 : http://jsfiddle.net/andrewwhitaker/g6FKz/

참고 :

• 을 나는 '유효'클래스를 적용했다 몇 가지 이유 처음에는 'blue'div로 변경되거나 그렇지 않으면 대상이 드래그 된 요소를 드래그 한 요소를 허용하지 않습니다 (유효한 경우에도). 이). 그게 뭔지 잘 모르겠다. jQueryUI의 버그 일 수도있다. 그래도 큰 문제는 아닙니다.
• 대상 droppable은 정확히 두 개의 녹색 요소가 아니며 해당 요소가 포함 된 흰색 div입니다. 이 예에서 분명해야합니다.
• draboxable div을 이동할 때마다 빨간색 상자가 초록색 상자 안에 있는지 확인하고 valid 클래스를 dra36able div에 할당하는 "drag"이벤트가 호출됩니다. droppable 객체는 valid draggables 만 허용합니다.

희망 하시겠습니까?