问题描述
我第一次使用 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>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)