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

时间:2017-09-10 16:57:45

标签: javascript jquery jquery-ui jquery-selectors jquery-ui-draggable

我想用鼠标拖动一个矩形来选择那些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 个答案:

答案 0 :(得分:0)

使用jQuery UI Selectable,代码向选定的div添加yes类,并在取消选择div时添加no类。代码看起来像这样:

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

(我必须将inside id更改为类,因为它使用多个元素。) 锚点标签在可选择的内部不起作用的解决方案是:https://bugs.jqueryui.com/ticket/4236