javascript - jQueryUI:如何将可放置区域限制为多个div？

感觉问题已经得到解决:

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？

最佳答案

我不确定是否可以使用containment选项来执行此操作，但是可以使用snap，snapMode和revert来完成您要执行的操作。

我会在您的时间轴元素中添加一个像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，以使事件元素很好地适合您的时间轴元素。