请生成html和js可拖拽的穿梭框，支持按ctrl或者shift多选按键的穿梭框，还有全选按钮，左右框

以下是一个可拖拽的穿梭框的HTML和JS代码：

HTML代码：

<div class="transfer-box">
  <div class="transfer-left">
    <div class="transfer-header">
      <label>
        <input type="checkbox" class="check-all-left">
        全选
      </label>
    </div>
    <ul class="transfer-list" id="left-list">
      <li draggable="true">选项1</li>
      <li draggable="true">选项2</li>
      <li draggable="true">选项3</li>
      <li draggable="true">选项4</li>
      <li draggable="true">选项5</li>
    </ul>
  </div>
  <div class="transfer-buttons">
    <button class="transfer-to-right">&gt;</button>
    <button class="transfer-to-left">&lt;</button>
  </div>
  <div class="transfer-right">
    <div class="transfer-header">
      <label>
        <input type="checkbox" class="check-all-right">
        全选
      </label>
    </div>
    <ul class="transfer-list" id="right-list">
    </ul>
  </div>
</div>

JS代码：

// 获取左右穿梭框及其列表和按钮
const transferBox = document.querySelector('.transfer-box')
const leftTransfer = transferBox.querySelector('.transfer-left')
const leftList = leftTransfer.querySelector('#left-list')
const rightTransfer = transferBox.querySelector('.transfer-right')
const rightList = rightTransfer.querySelector('#right-list')
const toRightButton = transferBox.querySelector('.transfer-to-right')
const toLeftButton = transferBox.querySelector('.transfer-to-left')
const checkAllLeft = leftTransfer.querySelector('.check-all-left')
const checkAllRight = rightTransfer.querySelector('.check-all-right')

// 标记当前是否正在拖拽
let isDragging = false

// 鼠标按下事件
leftList.addEventListener('mousedown', event => {
  // 如果按键不是ctrl或shift，则取消所有选中状态
  if (!event.ctrlKey && !event.shiftKey) {
    clearSelection()
  }
  isDragging = true
  // 获取被拖拽的元素
  const item = event.target.closest('li')
  if (item) {
    // 添加选中状态
    item.classList.add('selected')
    // 记录选中状态
    updateCheckedStatus()
    // 添加拖拽事件监听器
    leftList.addEventListener('mousemove', onMouseMove)
    leftList.addEventListener('mouseup', onMouseUp)
  }
})

// 鼠标移动事件
function onMouseMove(event) {
  // 如果正在拖拽
  if (isDragging) {
    // 获取被拖拽的元素
    const item = event.target.closest('li')
    if (item) {
      // 添加选中状态
      item.classList.add('selected')
      // 记录选中状态
      updateCheckedStatus()
    }
  }
}

// 鼠标松开事件
function onMouseUp() {
  // 移除拖拽事件监听器
  leftList.removeEventListener('mousemove', onMouseMove)
  leftList.removeEventListener('mouseup', onMouseUp)
  isDragging = false
}

// 清除所有选中状态
function clearSelection() {
  const selectedItems = leftList.querySelectorAll('.selected')
  selectedItems.forEach(item => {
    item.classList.remove('selected')
  })
  updateCheckedStatus()
}

// 更新选中状态
function updateCheckedStatus() {
  const selectedItems = leftList.querySelectorAll('.selected')
  const isCheckedAll = selectedItems.length === leftList.children.length
  checkAllLeft.checked = isCheckedAll
}

// 全选/取消全选事件
checkAllLeft.addEventListener('change', event => {
  const isCheckedAll = event.target.checked
  leftList.querySelectorAll('li').forEach(item => {
    item.classList.toggle('selected', isCheckedAll)
  })
  updateCheckedStatus()
})

// 点击“转移至右侧”按钮事件
toRightButton.addEventListener('click', () => {
  const selectedItems = leftList.querySelectorAll('.selected')
  selectedItems.forEach(item => {
    rightList.appendChild(item)
  })
  updateCheckedAllStatus()
})

// 点击“转移至左侧”按钮事件
toLeftButton.addEventListener('click', () => {
  const selectedItems = rightList.querySelectorAll('.selected')
  selectedItems.forEach(item => {
    leftList.appendChild(item)
  })
  updateCheckedAllStatus()
})

// 更新全选状态
function updateCheckedAllStatus() {
  const isLeftCheckedAll = leftList.querySelectorAll('li').length === 0
  checkAllLeft.checked = isLeftCheckedAll
  const isRightCheckedAll = rightList.querySelectorAll('li').length === 0
  checkAllRight.checked = isRightCheckedAll
}

// 全选/取消全选事件
checkAllRight.addEventListener('change', event => {
  const isCheckedAll = event.target.checked
  rightList.querySelectorAll('li').forEach(item => {
    item.classList.toggle('selected', isCheckedAll)
  })
  updateCheckedAllStatus()
})

// 拖拽事件
rightList.addEventListener('dragstart', event => {
  const item = event.target.closest('li')
  if (item) {
    // 将被拖拽的元素的id存储到数据传输对象中
    event.dataTransfer.setData('text/plain', item.id)
  }
})

// 放置事件
rightList.addEventListener('dragover', event => {
  event.preventDefault()
})

// 放置事件
rightList.addEventListener('drop', event => {
  // 阻止浏览器默认行为
  event.preventDefault()
  // 获取被拖拽的元素的id
  const id = event.dataTransfer.getData('text/plain')
  const item = document.getElementById(id)
  if (item) {
    // 将元素添加到右侧穿梭框中
    rightList.appendChild(item)
    updateCheckedAllStatus()
  }
})

CSS代码：

.transfer-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 600px;
  margin: 20px auto;
}

.transfer-left,
.transfer-right {
  display: flex;
  flex-direction: column;
  width: calc(50% - 50px);
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
}

.transfer-header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  border-bottom: 1px solid #ccc;
  background-color: #f5f5f5;
}

.transfer-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100px;
}

.transfer-to-right,
.transfer-to-left {
  margin: 10px 0;
  padding: 5px;
  border-radius: 4px;
  background-color: #f5f5f5;
  cursor: pointer;
}

.transfer-list {
  flex-grow: 1;
  padding: 10px;
  overflow-y: auto;
}

.transfer-list li {
  display: block;
  margin: 5px 0;
  padding: 5px;
  border-radius: 4px;
  cursor: move;
}

.transfer-list li.selected {
  background-color: #f5f5f5;
}

.check-all-left,
.check-all-right {
  margin: 0 5px;
  cursor: pointer;
}