拖动可选的jQuery内非选择者div

Question

我正在尝试使jQuery成为可选择对象，从而使某些元素可以使用过滤器进行选择，但其他一些具有不同类的元素也可以拖动（但是我正在[[not试图使相同的元素成为可选择对象，并且可拖动的）。

这里是一个基本示例：目标是能够将第一个'x'（这是一个具有.boundary类的div）拖动到第二个'x'并获得一些反馈，而div A，B，C （带有.tok类）通常是可选的。这两件事不应该相互影响：A B和C应该是可选的，每个'x'应该是可拖动的。

我不需要'x'div完全移动，甚至根本不需要改变位置，只需将它们从一个拖动到另一个，也许可以看到以某种方式突出显示的每个x，并获得x的信息当我掉落时被拖入其中。

$(function() {
  $("#selectable").selectable({
    filter: '.tok'
  });
});

// Option 1: with jquery draggable
$(".boundary").draggable();

// Option 2: bind dragstart etc.
$(document).ready(function() {
  $('.boundary').on("dragstart", function(event) {
    alert('drag started');
  });
  $('.boundary').on("dragenter dragover drop", function(event) {
    event.preventDefault();
    alert(event.type);
  });
})

#selectable .ui-selecting {
  background: #FECA40;
}

#selectable .ui-selected {
  background: #F39814;
  color: white;
}

.tok {
  display: inline-block;
  margin: 1px
}

.boundary {
  display: inline-block;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="selectable">
  <div id="t1" class="tok">A</div>
  <div id="b1" class="boundary">x</div>
  <div id="t2" class="tok">B</div>
  <div id="b2" class="boundary">x</div>
  <div id="t3" class="tok">C</div>
</div>

Answer 1

我留下答案而不是删除问题，以防其他人犯类似的错误：.draggable（）应该在相关元素存在之后被调用，因此将其放入$（document）.ready或确保相关的HTML部分已经被序列化了。

此问题中的代码段演示了一个selectable，其中包含可拖动的不可选择元素-此示例可能对其他人有用，因为我无法轻松找到这样的示例。