0

我需要找到一种方法来选择视口中两点之间的所有内容。我也需要该选择来跨越 HTML 元素。

考虑一个带有两个可移动框的页面。这些框由用户围绕内容移动。它们绝对位于屏幕上所有内容的前面。移动框时，我需要选择它们之间的所有内容。有没有人遇到过类似的事情？我基本上想做的是模仿智能手机选择句柄。

我知道有一个 javascript 函数 document.elementFromPoint(x, y)。在这种情况下这不起作用，因为这些框将被选为该点的最顶部元素。

4

3 回答 3

0 
var leftBound = Math.min(point1.x, point2.x);
var rightBound = Math.max(point1.x, point2.x);
var topBound = Math.min(point1.y, point2.y);
var bottomBound = Math.max(point1.y, point2.y);

$(".").filter(function(x) {
    var offset = $(this).offset();
    var top=offset.top, bottom=top+$(this).height;
    var left=offset.left, right=left+$(this).width;
    var corners = [[left,top], [left,bottom], [right,top], [right,bottom]];

    function inBox(point) {
        var x=point[0], y=point[1];
        return (leftBound<=x && x<=rightBound) && (topBound<=y && y<=bottomBound)
    }

    // overlap-based selection policy
    //   selects if one or more corners is in selection
    return corners.some(inBox);

    // overlap-based selection policy #2
    //   selects if any part of element is in selection
    return corners.some(inBox) //|| ... slightly more complicated logic

    // only-wholly-enclosed selection policy
    //   selects only if entire element is in selection
    return corners.every(inBox);
})

$(".")如果您不想要 jQuery，请替换为您最喜欢的基于递归回调的 DOM 遍历方法。

于 2012-05-10T23:22:42.690 回答
0

对于 WebKit 和 Opera，您可以这样做：

  • 获取拖动手柄的坐标
  • 隐藏拖动手柄
  • 调用document.caretPositionFromPoint(dragHandleX, dragHandleY)每个拖动手柄
  • 从上一步中获得的两个插入符号位置（每个位置由一个节点和该节点内的偏移量组成）创建一个新范围
  • 选择这个范围
  • 取消隐藏拖动手柄

在 Firefox 中，鼠标事件rangeParent和rangeOffset属性可能会有所帮助，但我认为您需要在事件触发之前以某种方式隐藏拖动句柄。

在 IE 中，您可以执行以下操作：

  • 获取拖动手柄的坐标
  • 隐藏拖动手柄
  • 使用为每个拖动手柄创建一个 TextRangedocument.body.createTextRange()
  • 调用moveToPoint(dragHandleX, dragHandleY)每个 TextRange
  • 使用以下命令将第一个 TextRange 扩展到第二个 TextRange 结束setEndPoint()：firstTextRange.setEndPoint(secondTextRange)
  • 选择这个范围：firstTextRange.select()
  • 取消隐藏拖动手柄
于 2012-05-10T23:29:09.247 回答
0

从它的声音来看，最好自己跟踪元素位置并计算在您的 javascript 代码中将触摸哪个元素。这将减少您与 DOM 的交互。

如果不是我听说过或用于从他人背后获取元素的唯一方法，请参见此处：http: //www.vinylfox.com/forwarding-mouse-events-through-layers/

它本质上涉及隐藏暂时接收原始元素的元素，然后使用 elementFromPoint() 查找下面的元素。在您的情况下，您可以在两个框之间执行此操作并重复，直到您点击包含元素。如果您有大面积和大量元素，这可能会占用大量资源。

我只在无论如何都想隐藏顶部元素的情况下使用它，但是您可以对其进行测试以查看是否存在可见的显示失真。

于 2012-05-10T23:36:37.730 回答