容器中有多个队列，这些队列之间可以随意拖动，class属性应为'queue'
队列中有多个拖动块，class属性应为'dragger'
把拖动块拖到队列的尾部空白处会使这个拖动块加到队列尾部
1.html部分：
| *商品展示图片： |
js部分:
//构建预览上传图片的函数，并接收传递过来的2个变量参数
functionhandleFiles(file,obj){
varval=file[0].name
if(!/.(gif|jpg|jpeg|png|GIF|JPG|bmp)$/.test(val)){
layer.msg('图片类型必须是.gif,jpeg,jpg,png,bmp中的一种',{icon:0,time: 2000,title:'提示'});
returnfalse;
}
//获取当前点击的元素的所有同级元素的html内容
varcon=obj.innerHTML;
//判断当前点击元素内是否已经存在img图片元素，如果有则先全部清除后再添加，如果没有就直接添加
if(con.indexOf("img")>0){
varpic=obj.getElementsByTagName("img");
for(vari=0;i
css部分:
.div1-tabletr{
width:100%;
height:68px;
line-height:68px;
border-bottom:1pxsolid#eaeaea;
}
.div1-tabletrtd:first-child{
padding-left:30px;
width:16%;
}
.shop_imgs{
display:flex;
justify-content:space-around;
margin:20px0;
}
.shop_imgsli{
position:relative;
width:100px;
height:100px;
background:url(../../images/user/shell/plus_sp_img.jpg)no-repeatcenter;
text-align:center;
cursor:move;
list-style:none;
}
.shop_imgsinput[type="file"]{
position:absolute;
left:0;
bottom:0;
/*z-index:3;*/
display:inline-block;
width:100%;
height:100%;
cursor:pointer;
border:none;
opacity:0;
padding-left:10px;
}
.shop_imgslispan{
position:absolute;
right:6px;
top:7px;
width:23px;
height:23px;
background:url(../../images/close.png)no-repeatcenter;
background-size:100%;
cursor:pointer;
}
.shop_imgsliimg{
position:absolute;
top:10px;
left:10px;
width:80px;
height:80px;
}
main.js:
//main.js里面的内容是调用:
(function(){registerDrag($('#container11'));})();
drag.js:
varqueueArr=[];vardraggers=[];varisDragging=false;varisMouseDown=false;vardragger=null;varmouseX;varmouseY;vardraggerLeft;vardraggerTop;varclone=null;varDRAG_THRESHOLD=5;varqueueContainer;varqueueActive={};varqueueUnActive={};varregisterDrag=function(container){
queueContainer=container;$.each(container.find('.queue'),function(index,value){queueArr[index]=$(value);draggers[index]=[];elements=$(value).find('.dragger');$.each(elements,function(_index,_value){draggers[index][_index]=$(_value);});});for(vari=0;iDRAG_THRESHOLD||Math.abs(dy)>DRAG_THRESHOLD){clone=makeClone(dragger);draggerLeft=dragger.offset().left-parseInt(dragger.css('margin-left'))-parseInt(dragger.css('padding-left'));draggerTop=dragger.offset().top-parseInt(dragger.css('margin-top'))-parseInt(dragger.css('padding-top'));clone.css({left:draggerLeft,top:draggerTop});queueContainer.append(clone);dragger.css('visibility','hidden');isDragging=true;}}
vardragEnd=function(e){
e.stopPropagation();if(isDragging){isDragging=false;clone.remove();dragger.css('visibility','visible');}
for(vari=0;imx){mx=val;pos=i;}}
returnpos;
}
varfindHover=function(queueIn){
if(queueIn==-1)
returnnull;varmx=-1,pos=null;varcloneTop=clone.offset().top;varcloneHeight=clone.height();varcloneLeft=clone.offset().left;varcloneWidth=clone.width();varisOwn=false;for(vari=0;imx){mx=s;pos=draggers[queueIn][i];}
}
if(mx<0){
if(isOwn)returnnull;if(draggers[queueIn].length==0){return{'hover':null};}else{
varlast,index=draggers[queueIn].length-1;while(index>=0&&draggers[queueIn][index][0]==dragger[0])
index--;if(index>=0)
last=draggers[queueIn][index];else
return{'hover':null};if(cloneLeft>=last.offset().left+last.width())
return{'hover':last,'insert':'right'};else
returnnull;
}
}
else{
varposMid=(2*pos.offset().left+pos.width())/2;varcloneMid=(2*clone.offset().left+clone.width())/2;if(posMid>cloneMid)
return{'hover':pos,'insert':'left'};else
return{'hover':pos,'insert':'right'};
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。