使用 jQuery selectable 选择连续元素
Posted
技术标签:
【中文标题】使用 jQuery selectable 选择连续元素【英文标题】：Selecting consecutive elements using jQuery selectable 【发布时间】：2018-07-29 17:06:06 【问题描述】：我正在 jQuery 中尝试Serialize 示例。
我注意到一种行为，我可以使用鼠标和 Ctrl 键选择不相关的元素。
我只想在鼠标点击时选择连续元素，而不是所有元素。
这就是目前正在发生的事情，它以项目 1、2 和 6 作为选择。
我只想通过鼠标单击选择连续元素而不是不相关的元素，并添加一个验证错误，您只能添加连续元素，如下面的屏幕截图所示。
这是我正在处理的代码，目前：
$(function()
$(`#selectable`).bind("mousedown", function(e)
e.metaKey = true;
).selectable(
selected: function(event, ui)
//For toggling between select clicks
if ($(ui.selected).hasClass('click-selected'))
$(ui.selected).removeClass('ui-selected click-selected');
else
$(ui.selected).addClass('click-selected');
console.log(ui.selected.innerText);
let selectedID = ui.selected.id;
$("#select-result").append(ui.selected.innerText);
,
unselected: function(event, ui)
$(ui.unselected).removeClass('ui-selected click-selected');
);
);#feedback
font-size: 1.4em;
#selectable .ui-selecting
background: #FECA40;
#selectable .ui-selected
background: #F39814;
color: white;
#selectable
list-style-type: none;
margin: 0;
padding: 0;
width: 60%;
#selectable li
margin: 3px;
padding: 0.4em;
font-size: 1.4em;
height: 18px;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectable - Serialize</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
</ol>
</body>
</html>这是我正在处理的fiddle。
【问题讨论】：
【参考方案1】：我认为有2种情况，
第一种情况是列表中未选择任何项目，因此您可以选择任何元素。 第二种情况：选择一个或多个项目以确保要选择的项目是所选项目的邻居。
$(function ()
$(`#selectable`).bind("mousedown", function (e)
e.metaKey = true;
).selectable(
selected: function (event, ui)
//For toggling between select clicks
if ($(ui.selected).hasClass('click-selected'))
$(ui.selected).removeClass('ui-selected click-selected');
else
//case when no Item is selected on your list
let noItemIsSelected = !$(".ui-widget-content").hasClass('click-selected');
//Case when on of neighbor's Item selected
let oneOfNeighborsIsSelected = $(ui.selected).next().hasClass('click-selected') || $(ui.selected).prev().hasClass('click-selected');
if (noItemIsSelected || oneOfNeighborsIsSelected)
$(ui.selected).addClass('click-selected');
console.log(ui.selected.innerText);
let selectedID = ui.selected.id;
console.log(event);
$("#select-result").append(ui.selected.innerText);
else
$(ui.selected).removeClass('ui-selected click-selected');
,
unselected: function (event, ui)
$(ui.unselected).removeClass('ui-selected click-selected');
);
);
你可以看到你的代码的更新版本here
【讨论】：
以上是关于使用 jQuery selectable 选择连续元素的主要内容，如果未能解决你的问题，请参考以下文章