在javascript中选择区域/矩形
Select area/rectangle in javascript
我需要通过鼠标在HTML5页面中选择一个区域。
然后我将与该区域内的元素进行交互。
一定有一种简单的方法可以做,但我找不到现成的东西。。
不幸的是,jquery UI选择不起作用,因为它似乎只支持一个父元素。
有现成的东西可以在带有虚线轮廓的区域上绘制透明div吗?
或者简单的实现。我可能会花几个小时来做一些事情,但我很惊讶没有什么能让我在5分钟内完成。
看起来很简单…
创建一个最初隐藏的div:
<div id="div" hidden></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/
我正是为了这个目的创建了一个库:https://github.com/Simonwep/selection
目前有完整的桌面和移动/触摸支持,以及自动滚动功能,正如您从文件资源管理器中所知:)
相关文章:
- onkeyup无法动态创建多个文本区域
- FabricJs-限制主对象内添加对象的移动区域
- 带有填充属性的SVG矩形显示在包含元素的上方插入框阴影
- HTML画布在绘图后立即擦除矩形
- 具有所有样式的文本正在复制到可编辑文本区域
- 如何为高图中的区域线创建z索引
- 在文本区域POST后解码JSON
- 在文本区域中使用jQuery.text()保持换行符
- ng在下拉列表和文本区域提交
- 使用fabric.js从矩形区域获取对象,并将该区域绘制到画布上
- 画布中绘制的矩形区域的弹出工具提示
- 悬停时以矩形突出显示整个标签区域
- 如何检查给定的非凸区域是否与给定矩形完全重叠
- 有没有办法清除画布元素中的非矩形区域
- 使用矩形的动态裁剪区域
- 确定Mozilla 4'的内容区域边界矩形
- 非矩形可悬浮区域
- 在javascript中选择区域/矩形
- 在分组条形图中缩放时如何剪切矩形外的区域
- 在d3.js中缩放选定的矩形区域