gpt4 book ai didi

javascript - 在 javascript/jquery 中使用左键单击和热键多选 div

转载 作者:行者123 更新时间:2023-11-28 07:27:06 24 4
gpt4 key购买 nike

在我重新发明轮子之前,我想知道是否有人已经编写了一个 js/jquery 库,允许用户通过左键单击并按住热键来选择多个 div 元素(就像在 Windows 中一样)

目前我只有这么多

http://jsfiddle.net/abarik/nv9hnusu/3/

<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo by abarik</title>

<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script><style type="text/css"></style>

<link rel="stylesheet" type="text/css" href="/css/normalize.css">


<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<style type="text/css">
.selected {
background-color:green;
}
</style>



<script type="text/javascript">//<![CDATA[
$(window).load(function(){
$('.selectable').click(function (e) {
// $('.console').append('shiftKey'+e.shiftKey)
$('.console').append('ctrlKey'+e.ctrlKey)
if (e.ctrlKey) {
$(this).toggleClass('selected');
}

});
var ids = new Array();
$('#btn').click(function () {
var selected_activities = $('.selected');
var ids = new Array();
selected_activities.each(function () {
var id_str = $(this).attr("id");
var id_arr = id_str.split("_");
var selval = id_arr[1];
if (selval != 'undefined' && selval != '' && selval != null) {
ids.push(selval);
}
});
alert(ids);
});
});//]]>

</script>


</head>
<body>
<div class="left_column">
<div class="selectable selected" id="participant_1">----1----</div>
<div class="selectable" id="participant_3">----2----</div>
<div class="selectable selected" id="participant_5">----3----</div>
</div>
<div class="right_column">
<div class="selectable" id="participant_2">----4----</div>
<div class="selectable" id="participant_4">----5----</div>
<div class="selectable" id="participant_6">----6----</div>
</div>
<input type="button" id="btn" value="Get selected ids">
<div class="console">ctrlKeyfalsectrlKeyfalsectrlKeytruectrlKeytrue</div>






</body></html>

最佳答案

找到了一个完全符合我需要的库 http://evulse.github.io/finderSelect/

关于javascript - 在 javascript/jquery 中使用左键单击和热键多选 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29525926/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com