yewanji 2023-03-24 15:30 采纳率: 36.3%
浏览 31
已结题

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

img

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

<!DOCTYPE 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>

  • 写回答

2条回答 默认 最新

  • 文盲老顾 WEB应用领新星创作者 2023-03-24 15:34
    关注

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

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

    评论

报告相同问题?

问题事件

  • 已结题 (查看结题原因) 6月1日
  • 创建了问题 3月24日

悬赏问题

  • ¥15 可以实现这个有不同背景颜色的九九乘法表吗?
  • ¥50 python写segy数据时出错2
  • ¥20 关于R studio 做精确稳定检验的问题!(语言-r语言)
  • ¥50 用贝叶斯决策方法,设计CAD程序
  • ¥20 关于#目标检测#的问题:(qq收集表到时间才能填写,填写的份数有上限)
  • ¥50 ZYNQ7020双核FLAHS烧写的问题
  • ¥20 ue 5 中想要实现第一人称人物左右行走摆动的效果,摄像头只向右摆动一次(关键词-结点)
  • ¥15 AD9164瞬时带宽1.8G,怎么计算出来?
  • ¥15 鼠标右键,撤销删除 复制 移动,要怎样删除? HKEY_CLASSES_ROOT*\shellex\ContextMenuHandlers 没用
  • ¥15 服务器安装php5.6版本