将非选择对象 div 拖动到 jquery 可选择范围内

Question

我正在尝试使 jquery 可选，使某些元素可以使用过滤器进行选择，但也有一些具有不同 class 的其他元素可用于拖动（但我不是尝试使相同的元素可选择和拖动）。

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

我不需要 'x' divs 完全移动，甚至根本不需要改变位置，只是从一个拖到另一个，也许会看到我通过的每个 x 突出显示以某种方式，并在我放下时获取x被拖入其中的信息。

#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>

<script>
  $(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);
    });
  })
</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 部分已经序列化是必要的。

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

将非选择对象 div 拖动到 jquery 可选择范围内

Drag non-selectee div within jquery selectable

javascript

jquery

drag-and-drop

draggable

jquery-ui-selectable