的数据可自定义，
支持数据搜索功能。
以下是一个示例代码：
```
<!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 is
CtrlPressed = e.
ctrlKey || e.metaKey;
var is
ShiftPressed = 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 (!is
CtrlPressed) {
deselectAllItems(leftList);
}
// Select the clicked item if the
shift key is pressed
if (is
ShiftPressed) {
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代码添加了事件监听器和一些帮助函数，以使穿梭框的功能正常工作。
扫一扫
2398
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
