我想创建一个简单的日历，该日历由7列（以天为单位）和几行（例如6行-每行4小时）表示。
结果应为：
monday tuesday wednesday ...
0-4 listItem listItem listItem
4-8 listItem listItem listItem
8-12 listItem listItem listItem
12-16 listItem listItem listItem
...
那么用户应该能够选择一些
listItem-，包括“跨日”（通过单击第一个元素并将光标拖动到下一个或上一个）。我使用jqueryUi中的
selectable-https://jqueryui.com/selectable/#default但仅适用于一列中的列表。
我试图修改代码并将
column-count: 2;添加为ol css属性：<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectable - Default functionality</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">
<style>
#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; border: 2px solid black}
ol{
column-count: 2;
}
</style>
<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>
<script>
$( function() {
$( "#selectable" ).selectable();
} );
</script>
</head>
<body>
<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>
<li class="ui-widget-content">Item 7</li>
</ol>
</body>
</html>
但是有一个问题，因为选择顺序错误：
还有一个
grid selectable列表元素-https://jqueryui.com/selectable/#display-grid，但顺序对于我的情况不正确（该顺序是按行而不是按列）。如何从一个
ol列表创建多个列并在此元素上使用selectable jqueryUi？ 最佳答案
我建议类似float: left;与column-count: 2;之类的东西。无论哪种方式，我都建议为ol设置适当的宽度和高度。这将使选择工作更加容易。
例子1
$(function() {
$("#selectable").selectable();
});#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: 10px;
width: 260px;
height: 240px;
}
#selectable li {
margin: 3px;
padding: 0.4em;
font-size: 1.4em;
height: 18px;
border: 2px solid black;
width: 100px;
float: left;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<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>
<li class="ui-widget-content">Item 7</li>
</ol>如果您需要更多的行和列控件，我将切换到
table元素。或从多个列表中创建多个列。例子2
$(function() {
$(".week-days").selectable({
filter: ".day-list > td"
});
});#feedback {
font-size: 1.4em;
}
.day-list .ui-selecting {
background: #FECA40;
border-color: #999;
}
.day-list .ui-selected {
background: #F39814;
color: white;
border: 2px solid #000;
}
.day-list td {
margin: 3px;
padding: 0.2em;
font-size: 1.3em;
height: 18px;
border: 2px solid #eee;
}<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.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>
<div class="week-days">
<table>
<tbody>
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
<tr class="day-list">
<th>0 - 4</th>
<td>Item 1</td>
<td>Item 7</td>
<td>Item 13</td>
<td>Item 19</td>
<td>Item 25</td>
</tr>
<tr class="day-list">
<th>4 - 8</th>
<td>Item 2</td>
<td>Item 8</td>
<td>Item 14</td>
<td>Item 20</td>
<td>Item 26</td>
</tr>
<tr class="day-list">
<th>8 - 12</th>
<td>Item 3</td>
<td>Item 9</td>
<td>Item 15</td>
<td>Item 21</td>
<td>Item 27</td>
</tr>
<tr class="day-list">
<th>12 - 16</th>
<td>Item 4</td>
<td>Item 10</td>
<td>Item 16</td>
<td>Item 22</td>
<td>Item 28</td>
</tr>
<tr class="day-list">
<th>16 - 20</th>
<td>Item 5</td>
<td>Item 11</td>
<td>Item 17</td>
<td>Item 23</td>
<td>Item 29</td>
</tr>
<tr class="day-list">
<th>20 - 24</th>
<td>Item 6</td>
<td>Item 13</td>
<td>Item 18</td>
<td>Item 24</td>
<td>Item 30</td>
</tr>
</tbody>
</table>
</div>希望能有所帮助。