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

问题描述

我第一次使用 SortableJS js,面临两个问题,问题是:

  1. 当我从左侧拖动任何元素时,文本也会被拖动,但我想允许拖动唯一的图像。
  2. 在我的代码中,当您拖动图片 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>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)