我想在我的代码中添加一个矩形拖动，这里是小提琴http://jsfiddle.net/cyTUX/39/，这段代码所做的是 onclick 它改变状态，它有 3 个状态，所以如果我们选择一个状态并拖动它围绕表格单元格，拖动所涉及的单元格获得该状态。
所以，我想要的是，不是以这种方式选择和拖动，而是选择一个状态并像矩形一样拖动，以便矩形中的所有表格单元格都获得该状态。
关于如何做到这一点的任何想法或例子？
问问题
4931 次
3 回答
2
所以我正在编写一个电子应用程序并且遇到了完全相同的问题。因为我不想使用 jQuery，所以我自己写了一些东西。写它花了很长时间，所以我用它做了一个插件，你可以很容易地自己使用。它超级小，就是这样做的。我称它为DragSelect，你可以从 Github获得它。
很酷的一点是你有0 个依赖项，因此可以将它与你喜欢的任何框架一起使用。
选择算法就像一个魅力，甚至免费为您提供带有修饰键的独立多选。
所以取自github 自述文件：
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')
});
你可以做更多的事情，所以一定要阅读github 上的整个文档
享受
于 2017-09-06T09:52:32.723 回答
1
创建一个新的 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 在内部，哪些在外部该地区
于 2012-08-16T02:19:23.317 回答