选择并拖动以获取所选元素

Question

我想添加一个矩形拖动到我的代码这里是小提琴http://jsfiddle.net/cyTUX/39/，这个代码做的是onclick它改变状态，它有3个状态，所以如果我们选择一个状态并将其拖动到表细胞，拖曳中涉及的细胞就会达到这种状态。

所以，我想要的是，而不是以这种方式选择和拖动，我想要做的是选择状态并像矩形一样拖动，以便矩形中的所有表格单元格获得该状态。

关于如何做到这一点的任何想法或例子？

Answer 1

所以我正在编写一个电子应用程序并遇到了完全相同的问题。 由于我不想使用jQuery，我自己写了一些东西。 编写它需要很长时间，因此我制作了一个插件，您可以轻松使用它。它超级小，就是这样。我称之为DragSelect，你可以得到它from Github。

关于这一点很酷的是你有 0依赖，因此可以在你喜欢的任何框架中使用它。

选择算法就像魅力一样，甚至可以免费为你提供一个带修改键的独立多选。

摘自github readme：

1。安装

容易

只需下载文件（缩小）并将其添加到您的文档中：

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

NPM

npm install --save-dev npm-dragselect

亭子

bower install --save-dev dragselect

就是这样，你准备摇滚了！ 当然，您也可以在代码中包含该函数以保存请求。

用法

现在在JavaScript中，你可以简单地将元素传递给函数：

简单

选择可以选择的元素：

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

你可以做更多的事情，所以一定要阅读the whole documentation on github

享受

Answer 2

创建一个新的div

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

然后是这样的 我希望你能够解决问题并完成它如何处理这个

的公正和粗野的例子

var element = $("#rectangle");
// on mousedown
$(window).mousedown(function(e1){ 
   // first move element on mouse location
   element.show().css({top:e1.pageY, left:e1.pageX});
   // resize that div so it will be resizing while moouse is still pressed
   var resize = function(e2) {
       // you should check for direction in here and moves with top or left
      element.width(e2.pageX - e1.pageX);
      element.height(e2.pageY - e1.pageY);
   };
   $(window).mousemove(resize);
   // and finally unbind those functions when mouse click is released
   var unbind = function() {
       $(window).unbind(resize);
       $(window).unbind(unbind);
   };
   $(window).mouseup(unbind);
});

像这样你可以拖动创建矩形，但只能从左到右方向，你可以在这里看到例子 http://jsfiddle.net/dXduv/1 你可以从事件中获取实际位置来计算哪些div在内部以及哪些div在区域之外

Answer 3

jQuery UI能够处理选择，拖放，调整大小和选择。如果你已经在使用jQuery，那么添加jQuery UI非常容易。您还会发现它包含许多预制的UI元素，可以快速轻松地创建表单。使用像jQuery UI这样的单独库（也可以查看Kendo UI）通常比尝试自己编写这样的复杂Javascript功能要容易得多。您将节省时间并可能拥有更多功能性产品。

来自jQuery UI的

This example in particular可能对您有用。