如何使用Lasso Selection Tool选择多个div

Question

我的HTML页面上有多个div，并且想要创建一个选择工具，以便能够选择这些div的子集（之后只需向这些div或其他类添加一个类）。它可以选择落在所选区域内的每个div（或者可能只选择中心位于所选区域内的div），如下所示：

我该怎么做？我查看了jQuery UI的.selectable()，但这并不是我想要的，因为它有一个矩形作为选择框，而不是自由形式。

我制作了一个我想要的JSFiddle，但是如何创建套索线？

http://jsfiddle.net/aesafjcy/4/

tool_active = false;
select_active = false;

$(".btn-select").click(function() {
  tool_active = !tool_active;
  $(this).toggleClass("btn-active");
  $("html").toggleClass("select-active");
});

$("html").mousedown(function(e) {
  if(tool_active && e.target.id != "selection_tool") {
    select_active = true;
  }
});

$("html").mouseup(function(e) {
  if(select_active) {
    select_active = !select_active;
  }
});

$("html").mousemove(function(e) {
  if(select_active && $(e.target).hasClass('box')) {
    $(e.target).addClass("box-selected");
  }
});

Answer 1

对于选择部分，您可以在每次移动时检测鼠标的位置，如果鼠标悬停在任何div上，请选择它们（添加一个类.selected）

要创建线条，您需要检查选择工具是否处于活动状态，并且鼠标已关闭。如果是，请将1px放置1px（或您想要的任何厚度）div，绝对定位，并将top和left属性设置为当前鼠标位置。这可以使用以下代码完成：

// On mouse move
$("html").mousemove(function(e) {

    // If the tool is active, and the mouse is down
    if (tool_is_active == true && select_active == true) {
        // Append a div that represents the drawn line
        $('body').append('<div class="selectionline"></div>')

        // Set the CSS for that div, to position it where the mouse is
        $('.selectionline:last-child').css({
            'left': e.pageX + "px",
            'top': e.pageY + "px",
        })
    }
});

我编辑了你的JSFiddle，在选择 - Link

时画出了这条线

绘制这条线有一个问题，有差距。这是因为mousemove函数检测到鼠标何时停止移动几分之一秒，而不是它移动的每个像素。

您可以尝试setTimeout()检测每毫秒，并删除该行中的间隙。