通过单击和拖动进行多重选择
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通过单击和拖动进行多重选择相关的知识，希望对你有一定的参考价值。
[我想创建一个选项，通过拖动并单击以选择几天。我确实尝试过拖动，但它不适合我，我希望他们也单击鼠标一起设置单击和拖动动作的方式是什么，我尝试设置如下所示的单击和拖动事件：// $（“ body”）。 on（'click mouseover'，“。button”，（event）=>
但是实际上，它是指按下或拖动时发生的事件，我不想不单击就无法单独拖动
谢谢
我想创建一个选项，通过拖动并单击以选择几天。我确实尝试过拖动，但它不适合我，我希望他们也单击鼠标一起设置单击和拖动动作的方式是什么，我尝试设置如下所示的单击和拖动事件：
$（“ body”）。 on（'click mouseover'，“。button”，（event）=> ）;
但是实际上，它是指按下或拖动时发生的事件，我不想不单击就无法单独拖动
谢谢
"use strict";
$(document).ready( () =>
//
$("body").on('click',".all_buttons" , (event) =>
if( $( ".all_buttons" ).hasClass( "point" ))
$( ".button" ).each(function( index )
$(this).prev('input').prop( "checked", false );
);
$( ".all_buttons" ).removeClass('point');
else
$( ".button" ).each(function( index )
$(this).prev('input').prop( "checked", true );
);
$( ".all_buttons" ).addClass('point');
);
//
// $("body").on('click mouseover',".button" , (event) =>
$("body").on('click mousedown',".button" , (event) =>
$(event.currentTarget).prev('input').prop("checked", !$(event.currentTarget).prev('input').prop("checked") );
);
);body
text-align: center
$selected-color: orange;
.button-group input
display: none;
.button-group input:checked + label,
.button-group input:checked + label:active
background-color: $selected-color;
.checked
background-color: $selected-color;
form
direction: rtl;
label
margin:1px !important;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div>
<form>
<h3>Checkbox Button Group with Foundation 6 for sites</h3>
<p>You can select multiple items at once</p>
<div class="button-group">
<input id="checkbox1" type="checkbox">
<label class="button all_buttons" for="checkbox1">all</label>
<input id="checkbox2" type="checkbox">
<label class="button" for="checkbox2">Sunday</label>
<input id="checkbox3" type="checkbox">
<label class="button" for="checkbox3">Monday</label>
<input id="checkbox4" type="checkbox">
<label class="button" for="checkbox4">Tuesday</label>
<input id="checkbox5" type="checkbox">
<label class="button" for="checkbox5">Wednesday</label>
<input id="checkbox6" type="checkbox">
<label class="button" for="checkbox6">Thursday</label>
<input id="checkbox7" type="checkbox">
<label class="button" for="checkbox7">Friday</label>
</div>
</form>
</div>
答案
我假设您想要复选框，因为单选按钮不能一次选中多个选项。通过创建一个仅在mousedown时触发的函数，我完成了您在JQuery中所描述的内容，将其悬停时，该复选框将变为选中状态。我忽略了全部按钮，因为它实际上不适用于此用例。
function isHeld()
$('input[type="checkbox"]').hover(function()
$(this).prop("checked", true);
)
$(document).ready(function()
var timeoutId = 0;
$('body').on('mousedown', function()
timeoutId = setTimeout(isHeld, 1000);
).on('mouseup mouseleave', function()
clearTimeout(timeoutId);
);
);div
user-select: none;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="container">
<div><input type="checkbox"> Monday</div>
<div><input type="checkbox"> Tuesday</div>
<div><input type="checkbox"> Wednesday</div>
<div><input type="checkbox"> Thursday</div>
<div><input type="checkbox"> Friday</div>
<div><input type="checkbox"> Saturday</div>
<div><input type="checkbox"> Sunday</div>
</div>
</body>以上是关于通过单击和拖动进行多重选择的主要内容，如果未能解决你的问题，请参考以下文章