jQueryUI : 드롭 가능한 영역을 여러 div로 제한하는 방법은 무엇입니까? 이 질문 같은 느낌

Question

이미 대답한다 :

• How to select multiple areas in containment using jQuery UI draggable
• Set more than one containment in jQuery Draggable

나는 거기에 배치하는 3 일정과 일부 드래그 요소를 가지고있다. 웬일인지 나는 그것을 작동시킬 수 없다. 워드 프로세서에서 발견 containment: ".timeline1, .timeline2, .timeline3"

$(function() { 
 
    $(".timeline1, .timeline2, .timeline3").droppable(); 
 

 
    $(".event").draggable({ 
 
    containment: ".timeline1, .timeline2, .timeline3" 
 
    }); 
 
});

.timeline1, .timeline2, .timeline3 { 
 
    width: 500px; 
 
    height: 40px; 
 
    border: 3px dashed gray; 
 
    margin-bottom: 10px; 
 
} 
 
.event { 
 
    height: 40px; 
 
    background: gray; 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" /> 
 

 
<div class="timeline1"></div> 
 
<div class="timeline2"></div> 
 
<div class="timeline3"></div> 
 

 
<div class="event">dance</div> 
 
<div class="event">sleep</div> 
 
<div class="event">eat</div>

---

업데이트 : 드래그 할 수있는 요소가 포함됩니다 http://api.jqueryui.com/draggable/#option-containment

이것은 내가 사용 구문 바운딩 박스에 선택자가 찾은 첫 번째 요소

질문이 유효합니까, 여러 div에 드롭 가능한 영역을 제한하는 방법을 알고 싶습니다.

Answer 1

봉쇄 옵션으로이 작업을 수행 할 수 있는지 확실하지 않지만 snap, snapMode 및 되돌리기를 사용하여 수행하려는 작업을 수행 할 수 있습니다.

나는 쉽게 확인하기 위해 타임 라인 요소 timeline-droppable 같은 일반적인 클래스를 추가 할 것 :

<div class="timeline1 timeline-droppable"></div> 
<div class="timeline2 timeline-droppable"></div> 
<div class="timeline3 timeline-droppable"></div> 

는 낙하 할 일정에 스냅 스냅 옵션을 사용합니다. 드래그 할 수있는 유효한 낙하 할에 떨어졌다 여부를 결정하기 위해 되돌리기 옵션을 사용

$(function() { 
    $(".timeline-droppable").droppable(); 

    $(".event").draggable({ 
     snap: ".timeline-droppable", 
     snapMode: "inner", 
     revert: function(droppedElement) { 
      var validDrop = droppedElement && droppedElement.hasClass("timeline-droppable"); 
      return !validDrop; 
     } 
    }); 
}); 

물론 당신이 당신의 이벤트 요소가 타임 라인 요소 내부에 잘 맞게 만들 수있는 CSS를 조정할해야합니다.