感觉问题已经回答:
我有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>
&#13;
在文档中找到更新:http://api.jqueryui.com/draggable/#option-containment
draggable元素将包含在选择器
找到的第一个元素的边界框中
问题仍然有效,我真的想知道如何将可投放区域限制为多个div?
答案 0 :(得分:3)
我不确定您是否可以使用包含选项执行此操作,但您可以使用snap,snapMode并还原以完成您尝试执行的操作。
我会在您的时间轴元素中添加一个像timeline-droppable
这样的公共类,以便更轻松:
<div class="timeline1 timeline-droppable"></div>
<div class="timeline2 timeline-droppable"></div>
<div class="timeline3 timeline-droppable"></div>
使用捕捉选项可以捕捉到可放置的时间轴。使用revert选项确定可拖动是否已放入有效的可放置中:
$(function() {
$(".timeline-droppable").droppable();
$(".event").draggable({
snap: ".timeline-droppable",
snapMode: "inner",
revert: function(droppedElement) {
var validDrop = droppedElement && droppedElement.hasClass("timeline-droppable");
return !validDrop;
}
});
});
当然,您需要调整CSS以使您的事件元素很好地适应时间轴元素。