可以用于编辑图片列表顺序,或者自己上传图片列表时排好顺序发送给后端;
数据动态绑定,至于样式什么的就自己随意发挥了,哈哈哈哈(附上丑陋的样式)
.img-item .down_btn {
position: absolute;
padding: 5px 10px;
right: 10px;
bottom: 20px;
height: 20px;
line-height: 20px;
background-color: #fff;
border: 1px solid #333;
border-radius: 5px;
z-index: 999;
cursor: pointer;
}
.img-item .up_btn {
position: absolute;
padding: 5px 10px;
left: 10px;
bottom: 20px;
height: 20px;
line-height: 20px;
background-color: #fff;
border: 1px solid #333;
border-radius: 5px;
z-index: 999;
cursor: pointer;
}
var imgHtml = ``;
imgList.map(t => {
imgHtml += `<div class="img-item">
<img src="${t}" />
<span class="down_btn"></span>
<span class="up_btn"></span>
</div>`
})
function initMoveImg() {
// 向下移动:
$('.down_btn').on('click',function() {
//img-item为图片外层的盒子,包含了down_btn和up_btn两个上下衣的按钮
var partentsDiv = $(this).parents('.img-item');
var next = partentsDiv.next();
if(next.html() !== undefined) {
next.fadeOut('0',function(){
next.after(partentsDiv);
}).fadeIn();
}
})
// 向上移动:
$('.up_btn').on('click',function () {
var parentDiv = $(this).parents('.img-item');
var prev = parentDiv.prev();
if(prev.html() !== undefined) {
prev.fadeOut('0',function () {
prev.before(parentDiv);
}).fadeIn();
}
})
}
initMoveImg();