如何使用 jquery 选择 div，例如在 photoshop 中？（选择区域）答案

【问题标题】：how to select divs with jquery like for example in photoshop ? (select area)如何使用 jquery 选择 div，例如在 photoshop 中？（选择区域）
【发布时间】：2009-08-17 12:09:15
【问题描述】：

我有一些 div，在一些位置。我想用鼠标选择它们，比如你什么时候在 Photoshop 中选择对象。所以我想选择一组div。用 jquery 可以吗？

【问题讨论】：

你的意思是像拖动选择吗？就像在几个对象周围拖动一个框，然后将所有包含的对象标记为选中？
是的，这正是我的意思.. jquery 有可能吗？

标签： jquery html select area

【解决方案1】：

有jQuery Drag to Select，应该可以解决你的问题。

【讨论】：

在使用它时遇到问题，有人知道如何运行该站点上的示例吗？
无论如何，有人知道如何将它与 div 一起使用吗？它只适用于 ul 和 li ？谢谢
据我从示例中可以看出，您需要这样做：$('#parent-element').dragToSelect(selectables: 'div')，但我不能 100% 确定...等等。
是的，应该这样做。如果你想让更多类型的元素可选择，用逗号分隔它们：div, li, tr（插件将此字符串直接插入到 jQuery 中，因此你几乎可以使用任何受支持的 CSS3-selector =D）
注意一定要加上花括号："{selectables: 'div'}"

【解决方案2】：

您可以通过更改 div 的类来模拟选定的效果，例如：

$('div.selectable').click(function() {
    $(this).addClass('.selected');
});

如果您希望在再次单击后取消选择 div，您可以执行以下操作：

$('div.selectable').click(function() {
    if($(this).is('.selected')) {
        $(this).removeClass('.selected');
    } else {
        $(this).addClass('.selected');
    }
});

或更简洁地使用三元运算符：

$('div.selectable').click(function() {
    var $div = $(this);
    $div.is('.selected') ? $div.removeClass('.selected') : $div.addClass('.selected');
});

【讨论】：

【解决方案3】：

您可以使用imgAreaSelect 插件作为代码的基础。

【讨论】：