html代码如下:
<style>
.qyzp-card img{
width: 12vw;
height: 7.5vw;
border-radius: 5px;
margin-right: 5px;
}
.qyzp-card>img:LAST-CHILD{
margin-right: 0;
}
</style>
<div id="imgs" style="display: flex">
<img id="1j" class="abc" src="/images/1.jpg">
<img id="2j" class="abc" src="/images/2.jpg">
<img id="3j" class="abc" src="/images/3.jpg">
<img id="4j" class="abc" src="/images/4.jpg">
<img id="5j" class="abc" src="/images/5.jpg">
</div>
可以把布局调成如下形式,横向排列
JavaScript代码如下:
<script type="text/javascript">
var yqyc_page = {
cloneObj: null,
enterImgId: null,
oldImg: null,
doSortImg:function (){
var ids=[]
$.each($('#imgs').find('img'), function(i, n){
ids.push($(n).attr('id'))
});
//此处为后端排序代码,可以根据每个图片id在数组中的位置排序
$.ajax({
type: "POST",
url: "<c:url value='/bi/companyinfo/query/sortPhoto'/>",
data: {
ids: ids.join(",")
},
success: function (data) {
}
});
}
}
$(function () {
$(".abc").on("dragover", function(e){
e.preventDefault();
});
$(".abc").on("dragstart", function(e){
yqyc_page.cloneObj = $(e.target).clone()
yqyc_page.oldImg=$(e.target)
});
$(".abc").on("dragenter", function(e){
yqyc_page.enterImgId = e.target.id
$('#123456').remove()
if(yqyc_page.oldImg.attr('id')!=e.target.id){
$('#'+yqyc_page.enterImgId).before($('<div id="123456" class="img-container" style="border: 1px solid grey;border-radius: 5px;font-size:medium;display: flex;justify-content: center;align-items: center">放这里</div>'))
}
});
$(".abc").on("dragend", function(e){
if(yqyc_page.enterImgId!=null&&yqyc_page.enterImgId!=e.target.id){
$('#123456').before(yqyc_page.oldImg)
yqyc_page.doSortImg()
}
$('#123456').remove()
yqyc_page.enterImgId=null
});
});
</script>
最终实现的效果如下:
VID_20231219_111858