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>

---

Update найден в документации: http://api.jqueryui.com/draggable/#option-containment

перетаскиваемый элемент будет содержаться к ограничивающей рамке первый элемент, найденный селектором

Вопрос по-прежнему действителен, мне бы очень хотелось знать, как ограничить область сбрасываемым до нескольких divs?

Answer 1

Я не уверен, что вы можете сделать это с помощью опции сдерживания, но вы можете использовать snap, snapMode и вернуться, чтобы выполнить то, что вы пытаетесь сделать.

Я хотел бы добавить общий класс как timeline-droppable на временную шкалу элементы, чтобы сделать его проще:

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

Используйте опцию привязки для привязки к вашим небьющимся срокам. Используйте опцию вернуться к определить, был ли упал в допустимом Droppable перетаскиваемые:

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

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

Конечно, вы должны настроить CSS, чтобы сделать ваши элементы событий подходят красиво внутри вашей временной шкалы элементов.