推荐一个拖拽组件js

发表时间:2020-10-15 08:42:35
摘要信息

dragula.js 大家百度搜索一下,就有下载,使用很简单,先上一个实例:


dragula.js 大家百度搜索一下,就有下载,使用很简单,先上一个实例:



点击图片右上角的按钮可以拖拽顺序。

<ul id="sortable" class="move-img layui-row">
{foreach $goods.images as $key=>$vo }
<li class="layui-col-xs6 layui-col-sm6 layui-col-md2 img-hover">
<div class="img-view">
<span class="handle">↔</span>
<img src="{$vo}" alt="">
<span class="img-border"></span>
<input type="checkbox" name="images[]" style="display: none" value="{$vo}" checked>
</div>
</li>
{/foreach}
<li class="layui-col-xs6 layui-col-sm6 layui-col-md2 img-hover" id="addDom">
<div class="img-view">
<button id="addImages" type="button" class="layui-btn layui-btn-primary" title="添加新图片">
<i class="layui-icon"></i>
</button>
<span class="img-border"></span>
</div>
</li>
</ul>



dragula([document.getElementById('sortable')], {
removeOnSpill: true,
moves: function(el, container, handle) {
return handle.className === 'handle';
}
});

更改顺序效果图

  



跟图一已经顺序变化了,上传服务器


无需纠结js去更改图片数组顺序,上传的时候自动排好序上传,保存到服务器自动完成。

40% Complete (success)