是否可以用鼠标绘制一个矩形来选择多个DIV？

Posted 2023-05-08

【中文标题】是否可以用鼠标绘制一个矩形来选择多个DIV？

【英文标题】：Is it possible to draw a rectangle with mouse to select multiple DIVs?

【发布时间】：2018-02-18 23:02:37

【问题描述】：

我想用鼠标拖动一个矩形来选择那些 div。

选定的 div 将类从“no”更改为“yes”。此外，a 链接是可点击和可点击的

<div id= "container" >
    <div id="div-1" info="info1">
         <div class="no" id="inside">
             <a href="#">something</a>
         </div>
    </div>
    <div id="div-2" info="info2">
         <div class="no" id="inside">
             <a href="#">something</a>
         </div>
    </div>
    <div id="div-3" info="info3">
         <div class="no" id="inside">
             <a href="#">something</a>
         </div>
    </div>
    <div id="div-4" info="info4">
         <div class="no" id="inside">
             <a href="#">something</a>
         </div>
    </div>
</div>

【问题讨论】：

你想要的不是问题。请尝试更准确，并在您的问题中添加一些代码。

【参考方案1】：

使用 jQuery UI Selectable，代码将 yes 类添加到选定的 div 并在取消选择 div 时添加 no 类。代码如下所示：

$(document).ready(function()
   $("#container").on("selectableselected selectableunselected", function()
     $(".inside").removeClass("yes").addClass("no");
     $(".ui-selected > .inside").removeClass("no").addClass("yes");
   );
);

（我不得不将inside id 更改为一个类，因为它使用多个元素。） 锚标签在 selectable 内不起作用的解决方案在这里：https://bugs.jqueryui.com/ticket/4236