在javascript中选择区域/矩形

我需要通过鼠标在HTML5页面中选择一个区域。

然后，我将与该区域内的元素进行交互。

必须有一个简单的方法，但我找不到任何现成的东西..

不幸的是，jquery UI选择不起作用，因为它似乎只支持一个父元素。

是否有任何现成的东西在虚线轮廓的区域上绘制透明div？

或者一个简单的实现。 我可能花了几个小时才能敲出一些东西但是我很惊讶没有什么可以让我在5分钟内完成它。

Answer 1

看起来很简单……

创建一个最初隐藏的div：

风格吧：

 #div { border: 1px dotted #000; position: absolute; } 

和JS：

 var div = document.getElementById('div'), x1 = 0, y1 = 0, x2 = 0, y2 = 0; function reCalc() { //This will restyle the div var x3 = Math.min(x1,x2); //Smaller X var x4 = Math.max(x1,x2); //Larger X var y3 = Math.min(y1,y2); //Smaller Y var y4 = Math.max(y1,y2); //Larger Y div.style.left = x3 + 'px'; div.style.top = y3 + 'px'; div.style.width = x4 - x3 + 'px'; div.style.height = y4 - y3 + 'px'; } onmousedown = function(e) { div.hidden = 0; //Unhide the div x1 = e.clientX; //Set the initial X y1 = e.clientY; //Set the initial Y reCalc(); }; onmousemove = function(e) { x2 = e.clientX; //Update the current position X y2 = e.clientY; //Update the current position Y reCalc(); }; onmouseup = function(e) { div.hidden = 1; //Hide the div }; 

http://jsfiddle.net/jLqHv/

Answer 2

我最近为这个主题创建了一个库： https ： //github.com/Simonwep/selection

此外还有移动支持（遗憾的是演示网站没有，所以在桌面上试试）。 我目前正在进行但已经可以使用:)