SortableJs：如何解决重影问题并仅拖动特定元素？

如何解决SortableJs：如何解决重影问题并仅拖动特定元素？

我第一次使用 SortableJS js，面临两个问题，问题是：

当我从左侧拖动任何元素时，文本也会被拖动，但我想允许拖动唯一的图像。
在我的代码中，当您拖动图片 2 时，图片 3 也会与 图片 2 一起拖动。我选择了图片 2，但为什么在将其拖到右侧时显示 图片 3 是错误的。

我无法理解这个问题。有人可以指导我解决这个问题吗？

视频网址：https://drive.google.com/file/d/1O_YQNMmBNxDw4TK3QfHioAgjzL1oW2d7/view?usp=sharing

Sortable.create(dragArea,{
  group: "shared",sort: true,});

Sortable.create(dropArea,});

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
<script src="http://SortableJS.github.io/Sortable/Sortable.js"></script>

<div class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-2 pt-6 gap-8">
  <div id="dragArea" class="container">
    <div class="pb-10">
      <strong class="ignore">Headers</strong>
      <div class="container mx-auto grid sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-1 xl:grid-cols24 pt-3 gap-8">
        <img src="https://dummyimage.com/400x130/a1a1a1/fff.png&text=Image+1" alt="">
      </div>
    </div>
    <div class="pb-10">
      <strong>Footers</strong>
      <div class="container mx-auto grid sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols24 pt-3 gap-8">
        <div class="drag cursor-pointer core-block">
          <img src="https://dummyimage.com/400x130/a1a1a1/fff.png&text=Image+2" alt="">
        </div>
        <div class="drag cursor-pointer core-block">
          <img src="https://dummyimage.com/400x130/a1a1a1/fff.png&text=Image+3" alt="">
        </div>
      </div>
    </div>
  </div>
  <div class="container mx-auto grid sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-1 xl:grid-cols- pt-6 gap-8">
    <div id="dropArea" class="rounded border-gray-300 dark:border-gray-700 border-dashed border-2 h-24"></div>
  </div>
</div>