是否可以用鼠标绘制一个矩形到 select 个多个 DIV?
Is it possible to draw a rectangle with mouse to select multiple DIVs?
我想用鼠标拖一个矩形到 select 那些 div。
selected div 会将 class 从“否”更改为“是”。此外,a
link 是可点击和可点击的
<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>
使用 jQuery UI 可选,代码将 yes
class 添加到选定的 div 并添加 no
class 当取消选择 div 时。代码看起来像这样:
$(document).ready(function(){
$("#container").on("selectableselected selectableunselected", function(){
$(".inside").removeClass("yes").addClass("no");
$(".ui-selected > .inside").removeClass("no").addClass("yes");
});
});
(我不得不将 inside
id 更改为 class,因为它使用多个元素。)
锚标签在 selectable 内部不起作用的解决方案在这里:https://bugs.jqueryui.com/ticket/4236
我想用鼠标拖一个矩形到 select 那些 div。
selected div 会将 class 从“否”更改为“是”。此外,a
link 是可点击和可点击的
<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>
使用 jQuery UI 可选,代码将 yes
class 添加到选定的 div 并添加 no
class 当取消选择 div 时。代码看起来像这样:
$(document).ready(function(){
$("#container").on("selectableselected selectableunselected", function(){
$(".inside").removeClass("yes").addClass("no");
$(".ui-selected > .inside").removeClass("no").addClass("yes");
});
});
(我不得不将 inside
id 更改为 class,因为它使用多个元素。)
锚标签在 selectable 内部不起作用的解决方案在这里:https://bugs.jqueryui.com/ticket/4236