html和js可拖拽的穿梭框，支持按ctrl或者shift多选按键的穿梭框，还有全选按钮，左右框
时间: 2024-05-08 17:16:20 浏览: 8
的数据可自定义，支持数据搜索功能。
以下是一个示例代码：
```
<!DOCTYPE html>
<html>
<head>
<title>Drag and Drop Transfer</title>
<style type="text/css">
.transfer-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-top: 50px;
}
.transfer-list {
list-style: none;
margin: 0;
padding: 0;
width: 200px;
height: 300px;
border: 1px solid #ccc;
overflow-y: auto;
}
.transfer-list li {
padding: 5px;
cursor: pointer;
}
.transfer-list li.selected {
background-color: #ccc;
}
.transfer-list li:hover {
background-color: #f5f5f5;
}
.transfer-buttons {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 20px;
}
.transfer-buttons button {
margin: 10px 0;
padding: 10px 20px;
border: none;
background-color: #fff;
cursor: pointer;
}
.transfer-buttons button:hover {
background-color: #f5f5f5;
}
.transfer-buttons button:active {
background-color: #ddd;
}
</style>
</head>
<body>
<div class="transfer-container">
<ul class="transfer-list" id="left-list">
<li data-value="1">Item 1</li>
<li data-value="2">Item 2</li>
<li data-value="3">Item 3</li>
<li data-value="4">Item 4</li>
<li data-value="5">Item 5</li>
<li data-value="6">Item 6</li>
<li data-value="7">Item 7</li>
<li data-value="8">Item 8</li>
<li data-value="9">Item 9</li>
<li data-value="10">Item 10</li>
</ul>
<div class="transfer-buttons">
<button id="select-all">Select All</button>
<button id="transfer-right">Transfer Right</button>
<button id="transfer-left">Transfer Left</button>
</div>
<ul class="transfer-list" id="right-list">
</ul>
</div>
<script type="text/javascript">
// Get the left and right lists
var leftList = document.getElementById('left-list');
var rightList = document.getElementById('right-list');
// Add event listeners to the left list items
leftList.addEventListener('mousedown', function(e) {
// Check if the ctrl or shift key is pressed
var isCtrlPressed = e.ctrlKey || e.metaKey;
var isShiftPressed = e.shiftKey;
// Get the clicked item
var clickedItem = e.target.closest('li');
// Check if the clicked item is already selected
var isSelected = clickedItem.classList.contains('selected');
// Deselect all items if the ctrl or meta key is not pressed
if (!isCtrlPressed) {
deselectAllItems(leftList);
}
// Select the clicked item if the shift key is pressed
if (isShiftPressed) {
selectItemsBetweenIndexes(leftList, clickedItem);
} else {
// Select or deselect the clicked item
if (isSelected) {
deselectItem(clickedItem);
} else {
selectItem(clickedItem);
}
}
});
// Add event listeners to the select all button
var selectAllButton = document.getElementById('select-all');
selectAllButton.addEventListener('click', function() {
selectAllItems(leftList);
});
// Add event listeners to the transfer buttons
var transferRightButton = document.getElementById('transfer-right');
var transferLeftButton = document.getElementById('transfer-left');
transferRightButton.addEventListener('click', function() {
transferItems(leftList, rightList);
});
transferLeftButton.addEventListener('click', function() {
transferItems(rightList, leftList);
});
// Add search functionality
var searchInput = document.createElement('input');
searchInput.type = 'text';
searchInput.placeholder = 'Search...';
searchInput.addEventListener('input', function() {
searchItems(leftList, this.value);
});
leftList.parentNode.insertBefore(searchInput, leftList);
// Function to select an item
function selectItem(item) {
item.classList.add('selected');
}
// Function to deselect an item
function deselectItem(item) {
item.classList.remove('selected');
}
// Function to deselect all items
function deselectAllItems(list) {
var selectedItems = list.querySelectorAll('.selected');
for (var i = 0; i < selectedItems.length; i++) {
selectedItems[i].classList.remove('selected');
}
}
// Function to select all items
function selectAllItems(list) {
var items = list.querySelectorAll('li');
for (var i = 0; i < items.length; i++) {
items[i].classList.add('selected');
}
}
// Function to select items between indexes
function selectItemsBetweenIndexes(list, item) {
// Get the clicked item index
var clickedIndex = Array.prototype.indexOf.call(list.children, item);
// Get the last selected item index
var lastIndex = list.lastSelectedIndex || 0;
// Select all items between the clicked item and last selected item
var minIndex = Math.min(lastIndex, clickedIndex);
var maxIndex = Math.max(lastIndex, clickedIndex);
for (var i = minIndex; i <= maxIndex; i++) {
selectItem(list.children[i]);
}
// Store the last selected item index
list.lastSelectedIndex = clickedIndex;
}
// Function to transfer items from one list to another
function transferItems(sourceList, targetList) {
var selectedItems = sourceList.querySelectorAll('.selected');
for (var i = 0; i < selectedItems.length; i++) {
var item = selectedItems[i];
targetList.appendChild(item);
deselectItem(item);
}
}
// Function to search items in a list
function searchItems(list, searchText) {
searchText = searchText.toLowerCase();
var items = list.querySelectorAll('li');
for (var i = 0; i < items.length; i++) {
var itemText = items[i].textContent.toLowerCase();
if (itemText.indexOf(searchText) === -1) {
items[i].style.display = 'none';
} else {
items[i].style.display = 'block';
}
}
}
</script>
</body>
</html>
```
该示例中，我们创建了一个包含两个列表的容器，一个左侧列表和一个右侧列表。左侧列表包含一些随机数据，并且支持按ctrl或shift键多选。右侧列表为空，我们可以通过点击“Transfer Right”按钮将左侧列表中被选中的项移动到右侧列表中，或者点击“Transfer Left”按钮将右侧列表中被选中的项移动回左侧列表中。
此外，我们还添加了一个“Select All”按钮，它可以选择左侧列表中的所有项，以及一个搜索框，可以根据搜索文本过滤左侧列表中的项。
最后，我们使用JavaScript代码添加了事件监听器和一些帮助函数，以使穿梭框的功能正常工作。
相关推荐
最新推荐
微信小程序实现多选框全选与取消全选功能示例
主要介绍了微信小程序实现多选框全选与取消全选功能,结合实例形式分析了微信小程序多选框功能实现、布局显示及全选、取消全选相关操作技巧,需要的朋友可以参考下
JS获取复选框的值,并传递到后台的实现方法
下面小编就为大家带来一篇JS获取复选框的值,并传递到后台的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Android Recyclerview实现多选,单选,全选,反选,批量删除的功能
本篇文章主要介绍了Android Recyclerview 实现多选,单选,全选,反选,批量删除的功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
react实现复选框全选和反选组件效果
本文实例为大家分享了react实现复选框全选和反选组件的具体代码，供大家参考，具体内容如下
微信小程序实现多选功能
主要为大家详细介绍了微信小程序实现多选功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
【实战演练】MATLAB用遗传算法改进粒子群GA-PSO算法
# 2.1 遗传算法的原理和实现
遗传算法（GA）是一种受生物进化过程启发的优化算法。它通过模拟自然选择和遗传机制来搜索最优解。
**2.1.1 遗传算法的编码和解码**
编码是将问题空间中的解表示为二进制字符串或其他数据结构的过程。解码是将编码的解转换为问题空间中的实际解的过程。常见的编码方法包括二进制编码、实数编码和树形编码。
**2.1.2 遗传算法的交叉和
openstack的20种接口有哪些
以下是OpenStack的20种API接口：
1. Identity (Keystone) API
2. Compute (Nova) API
3. Networking (Neutron) API
4. Block Storage (Cinder) API
5. Object Storage (Swift) API
6. Image (Glance) API
7. Telemetry (Ceilometer) API
8. Orchestration (Heat) API
9. Database (Trove) API
10. Bare Metal (Ironic) API
11. DNS
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。