js 如何批量选中多张图片然后拖拽到另一个地方

假如左边有一堆图片列表，我现在想用js批量选中（按shift键）然后拖拽到红框区域，有什么好的办法能够实现
附上测试代码

html>
<html>
<head>
   <title>Sortable.js 批量选中和拖拽示例title>
   <script src="../../js/Sortable.min.js">script>
head>
<body>
<div id="container1" class="container">
   <img src="../images/mock/1.jpg" alt="">
   <img src="../images/mock/2.jpg" alt="">
   <img src="../images/mock/3.jpg" alt="">
   <img src="../images/mock/4.jpg" alt="">
div>

<div id="container2" class="container">div>

body>
html>
<style>
   #container1{
      float:left;
   }
   #container1 img{
      width: 80px;
      height: 80px;
      display: block;
      margin-bottom: 10px;

   }
   #container2{
      margin-left: 20px;
      float:left;
      width: 400px;
      height: 400px;
      border: 1px red solid;
      background: #f3f3f3;
   }
style>
<script>
  var container1 = document.getElementById("container1");
  var container2 = document.getElementById("container2");

  var sortable = Sortable.create(container1, {
    selectedClass: 'selected',
    chosenClass: 'chosen',
    animation: 150,
    onEnd: function(evt) {
      var itemEl = evt.item;
      container2.appendChild(itemEl);
    }
  });
script>

https://blog.csdn.net/qq_46048008/article/details/126172744

http://www.gimoo.net/t/1504/55309352ab216.html

你可以在鼠标点击的时候，检查 shift 键是否松开，没有松开就多选

要实现批量选中多张图片并拖拽到另一个地方，可以通过以下步骤实现：

定义一个变量用于保存当前选中的图片元素。
给每个图片元素绑定 click 事件，当点击时切换其选中状态，并将其添加或从选中列表中删除。
给整个文档绑定 keydown 和 keyup 事件，当按下 Shift 键时将其状态设置为按下，松开时设置为弹起。
给容器绑定 dragover 事件，阻止默认行为。
给容器绑定 drop 事件，遍历选中的图片元素并将其添加到容器中。
以下是示例代码：

var container1 = document.getElementById("container1");
var container2 = document.getElementById("container2");
var selectedItems = [];
var shiftPressed = false;

// 给每个图片元素绑定 click 事件
container1.addEventListener('click', function(event) {
  if (event.target.nodeName === 'IMG') {
    var itemEl = event.target;
    var index = selectedItems.indexOf(itemEl);

    if (index === -1) {
      // 没有选中，添加到选中列表
      selectedItems.push(itemEl);
      itemEl.classList.add('selected');
    } else {
      // 已选中，从选中列表中删除
      selectedItems.splice(index, 1);
      itemEl.classList.remove('selected');
    }
  }
});

// 给整个文档绑定 keydown 和 keyup 事件
document.addEventListener('keydown', function(event) {
  if (event.key === 'Shift') {
    shiftPressed = true;
  }
});

document.addEventListener('keyup', function(event) {
  if (event.key === 'Shift') {
    shiftPressed = false;
  }
});

// 给容器绑定 dragover 事件，阻止默认行为
container2.addEventListener('dragover', function(event) {
  event.preventDefault();
});

// 给容器绑定 drop 事件
container2.addEventListener('drop', function(event) {
  event.preventDefault();
  for (var i = 0; i < selectedItems.length; i++) {
    container2.appendChild(selectedItems[i]);
  }
  selectedItems = [];
});

最后，还需要在 CSS 样式表中添加一个选中状态的样式，例如：

.selected {
  border: 2px solid red;
}

以实现批量选中多张图片并拖拽到另一个地方了。