在jquery selectable中拖动非选定的div

Posted 2023-05-07

【中文标题】在jquery selectable中拖动非选定的div

【英文标题】：Drag non-selectee div within jquery selectable

【发布时间】：2020-07-05 11:15:45

【问题描述】：

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

这是一个基本示例：目标是能够将第一个“x”（这是一个 .boundary 类的 div）拖到第二个“x”中并获得一些反馈，而 div A、B、 C（具有 .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>

【问题讨论】：

拖动和选择似乎有效。这是给你带来麻烦的部分吗？ “...查看我通过的每个 x 以某种方式突出显示，并获取当我放下时 x 被拖入的信息。”

@showdev 你说得对，它在 *** 运行代码 sn-p 中运行良好。区分呈现的 html 我发现了问题：我偶然将 .draggable() 放在了 $(document).ready 之外，并且我在文件中的 JS 之后有了 HTML，所以我正在应用它的类一定不存在...我现在能够修复它，谢谢！

抱歉，我的编辑悄悄解决了这个问题。我已重新编辑以恢复您的原始内容。

实际上它非常有帮助，因为它允许我将工作示例与我的代码进行比较。谢谢！

【参考方案1】：

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

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