本帖最后由 bestcoder 于 2020-12-14 20:53 编辑
商品轮播图都上传完毕了,突然发现第一张漂亮的图竟然排到了轮播的最后面,心中一万头草泥马飞过,这尼玛还不能排序,没办法只能全部删掉重新上传。
那么本帖就是要解决这个问题滴,给轮播图加个拖动排序的功能,想让那张图排到第一个,只需拖动下图片就ojbK,废话不多说,先上效果图。
![5446 5446](/static/images/bbs/nopic.jpg)
看完效果图,满意不?下面教你怎么实现。
找到app/admin/view/store/store_product/create.php这个文件,约261行处改为如下
draggable="true"
@dragstart="handleDragStart($event, item)"
@dragover.prevent="handleDragOver($event, item)"
@dragenter="handleDragEnterForSliderImage($event, item)"
@dragend="handleDragEnd($event, item)"
>
然后在下面的vue中的methods对象里添加如下方法:
handleDragEnterForSliderImage (e, item) {
e.dataTransfer.effectAllowed = 'move'
if (item === this.dragging) {
return
}
var newItems = [...this.formData.slider_image];
var src = newItems.indexOf(this.dragging);
var dst = newItems.indexOf(item);
newItems.splice(dst, 0, ...newItems.splice(src, 1))
this.formData.slider_image = newItems;
}
这样既可拖动轮播图片进行排序了,排序后点保存既可生效,小程序端就可看到效果了。
4.03版本营销插件,请移步:
http://bbs.crmeb.net/thread-4795-1-1.html更多贴心小功能、营销插件可进群获取,qq群号:175694856
ByteGlad 最后编辑于2022-08-19 11:03:58
快捷回复