Javascript 选择并拖动以获取选定图元

我想在我的代码中添加一个矩形拖动，这里是fiddle，这个代码所做的是单击它改变状态，它有3个状态，所以如果我们选择一个状态并在表格单元格周围拖动它，参与拖动的单元格将获得该状态

所以，我想做的不是这样选择和拖动，而是选择一个状态并像矩形一样拖动，这样矩形中的所有表格单元格都会得到该状态

关于如何做到这一点，有什么想法或例子吗

能够处理选择、拖放、调整大小和选择。如果您已经在使用jQuery，那么添加jqueryui是非常容易的。您还将发现，它包含许多预先制作的UI元素，使表单创建变得快速而简单。使用一个单独的库，比如jqueryui（也可以签出），通常比自己编写复杂的Javascript功能要容易得多。您将节省时间，并可能有一个更实用的产品

来自jQuery的UI可能对您有用。

创建一个新的div

<div style="position:absolute;border:1px solid green;display:none" id="rectangle"></div>

像这样，您可以拖动来创建矩形，但只能从左向右拖动，您可以在这里看到示例

---

你可以根据事件的实际位置来计算哪些div在区域内，哪些div在区域外

所以我在写一个电子应用程序，遇到了完全相同的问题。 因为我不想使用jQuery，所以我自己写了一些东西。 写它花了很长时间，所以我用它做了一个插件，你可以很容易地使用自己。它是超小的，可以做到这一点。我打电话给你，你可以得到它

很酷的一点是，您拥有0依赖项，因此可以将其用于任何您喜欢的框架

选择算法就像一个魅力，甚至给你一个独立的多重选择与修改键免费

因此，摘自：

1.装置 容易的 只需下载文件（缩小）并将其添加到文档中：

<script src="https://thibaultjanbeyer.github.io/DragSelect/ds.min.js"></script>

凉亭 就这样，你准备好摇滚了
当然，您也可以在代码中包含保存请求的函数

用法 现在，在JavaScript中，您可以简单地向函数传递元素，如下所示：

简单的 选择可以选择的图元：

var ds = new DragSelect({
  selectables: document.getElementsByClassName('selectable-nodes')
});

你还可以做很多事情，所以一定要阅读

---

Enjoy你的意思是你想调整矩形的大小，区域内的所有内容都将更改为该状态？类似于桌面拖动，看起来像矩形，但也应涉及选定状态，以便表格单元格获得该值。类似于：？@Jeemusu，是的，与此类似，但首先需要选择状态，然后进行拖动。此示例类似于选择、拖动和拖放，我需要的是选择和拖动，以便拖动中涉及的所有元素都获得该值。您当然可以使用jQuery UI实现这一点。在这种情况下，还可以链接DOM元素，以便一个元素可以进行选择、拖放和调整大小。它不应该只是多一点代码来达到你想要的效果，但这至少会让你达到目的。我认为这是一个好的开始，我会继续努力，如果我有问题，会给你回复。所以我尝试用我在网上找到的一些其他代码来实现我的拖动，但没有成功，这里是小提琴，这段代码允许从任何方向拖动选定区域，我试图选择一个状态，并做矩形拖动，但它没有发生，请帮助。

npm install --save-dev npm-dragselect

bower install --save-dev dragselect

var ds = new DragSelect({
  selectables: document.getElementsByClassName('selectable-nodes')
});