<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽demo</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
#container {
width:100%;
white-space:nowrap;
padding:0px;
}
.item{
border-style:solid;
border-width:1px;
border-color:#000;
width:200px;
height:200px;
float:left;
}
.item img{
width:100px;
height:100px;
}
.hide{
display:none;
}
.btn{
border:0;
background-color:none;
}
.maskDiv{position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.7; opacity:.70; filter: alpha(opacity=70);}
</style>
<script>
//定义控件
var srcdiv=null;//拖动的源
function allowDrop(ev){
ev.preventDefault();
}
function drag(ev,divdom){
srcdiv=divdom;
ev.dataTransfer.setData("text/html",divdom.innerHTML);
}
function drop(ev,divdom){
ev.preventDefault();
if(srcdiv!=divdom){
srcdiv.innerHTML=divdom.innerHTML;
divdom.innerHTML=ev.dataTransfer.getData("text/html");
}
}
var currentReViewImgIndex=0;
//预览图片
function reViewImgGroup(widgetId,uuid,el){
$("#mask"+widgetId).removeClass("hide");
var url=$("#img"+uuid).attr("src");
//console.info($("#img"+uuid));
$("#reviewImg"+widgetId).attr("src",url);
//计算出当前是第几张图片
var item=$(el).parent().parent();
//console.info(item);
//var itemList=$("#"+widgetId).find(".item");
var itemList=$(".item");
for(var i=0;i<itemList.length;i++){
//console.info($(itemList[i]));
var img=$(itemList[i]).find("img");
//console.info($(img).attr("id"));
if("img"+uuid==$(img).attr("id")){
currentReViewImgIndex=i;
console.info(currentReViewImgIndex);
break;
}
}
}
//上一张图片
function preImg(widgetId){
var itemList=$(".item");
//console.info(currentReViewImgIndex);
var _index=currentReViewImgIndex-1;
if(_index<0){
_index=0;
}
var item=itemList[_index];
//拿出该位置的图片
var img=$(item).find("img");
var url=$(img).attr("src");
$("#reviewImg"+widgetId).attr("src",url);
currentReViewImgIndex=_index;
}
//下一张图片
function nextImg(widgetId){
var itemList=$(".item");
var len=itemList.length-2;
//console.info(currentReViewImgIndex);
var _index=currentReViewImgIndex+1;
//console.info("_index="+_index);
if(_index>len){
//console.info(1111111);
_index=len;
}
var item=itemList[_index];
//拿出该位置的图片
var img=$(item).find("img");
var url=$(img).attr("src");
$("#reviewImg"+widgetId).attr("src",url);
currentReViewImgIndex=_index;
}
function deleteImg(el,imgId,deleteServer){
var item=$(el).parent().parent();
$(item).remove();
if(imgId&&deleteServer){
//执行删除图片动作
console.info(deleteServer+"删除图片["+imgId+"]");
}
}
(function(){
var _widget={
_id:null,
_el:null,
_config:null,
_srcItem:null,//移动的源
_init:function(options){
var self=this;
self._config=options||{};
self._render();
self._bind();
},
_render:function(){
var self=this;
var c=self._config;
//在最开始加入一个空的格子，即新增图片按钮
//最后再加一个空的
var _html='<div id="lastItem'+self._id+'" class="item">'
+' <p class="itemName"></p>'
+' <p style="text-align:center;"><a id="addBtn'+self._id+'" style="text-decoration:none;font-size:20px;" href="javascript:void(0);">上传图片</a></p>'
+' <p class="hide"><input id="fileEl'+self._id+'" type="file" multiple /></p>'
+'</div>';
//预览图片层
_html+='<div id="mask'+self._id+'" class="maskDiv hide">'
+' <div style="width: 60%;height: 50%;background-color: white;margin:210px;">'
+' <div style="float:left;"><a href="javascript:preImg(\''+self._id+'\');">上一张</a></div>'
+' <img id="reviewImg'+self._id+'" style="float:left;height:100%;width:auto;" src="" />'
+' <span style="float:left;"><a href="javascript:nextImg(\''+self._id+'\');">下一张</a></span>'
+' </div>'
+'</div>';
$(self._el).html(_html);
if(c.data){
self.loadData(c.data);
}
},
_bind:function(){
var self=this;
var c=self._config;
//新增按钮点击事件
$("#addBtn"+self._id).click(function(){
//触发文件域点击事件
$("#fileEl"+self._id).click();
});
//文件域改变事件
$("#fileEl"+self._id).change(function(e1){
if(!$(this).val()||$(this).val()==""){
return;
}
console.log(e1);
var fileArr=e1.currentTarget.files;
console.log(fileArr);
for(var i=0;i<fileArr.length;i++){
var file=fileArr[i];
var fileName=file.name;
(function(imgName){
var reader=new FileReader();
reader.readAsDataURL(file);
//读取文件过程方法
reader.onloadstart=function(e){
console.log("开始读取....");
}
reader.onprogress=function(e){
console.log("正在读取中....");
}
reader.onabort=function (e){
console.log("中断读取....");
}
reader.onerror=function (e){
console.log("读取异常....");
}
reader.onload=function(e){
console.log("成功读取....");
console.log(e);
var imgMsg={
name:imgName,//获取文件名
base64:this.result//reader.readAsDataURL方法执行完后，base64数据储存在reader.result里
}
var _uuid=Math.random()+"";
_uuid=_uuid.replace(".","");
//创建显示域
var _html='<div class="item" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">'
+' <p id="fileName'+_uuid+'" class="itemName">'+imgName+'</p>'
+' <p><a href="javascript:void(0);"><img id="img'+_uuid+'" class="itemUrl" style="width:100%;" src="" /></a></p>'
//+' <p><input id="'+_uuid+'" onchange="uploadFile(this,\''+_uuid+'\',\''+uploadServer+'\')" type="file" /></p>'
+' <p><button class="btn" type="button" onclick="reViewImgGroup(\''+self._id+'\',\''+_uuid+'\',this)">预览</button> <button class="btn" type="button" onclick="deleteImg(this)">删除</button></p>'
+'</div>';
$("#lastItem"+self._id).before(_html);
//模拟上传
var c=0;
var _task=setInterval(function(){
c++;
if(c==6){
clearInterval(_task);
$("#img"+_uuid).attr("src",imgMsg.base64);
}else{
var _text=$("#fileName"+_uuid).text();
$("#fileName"+_uuid).html(_text+".");
}
},1000);
}
})(fileName);
}
});
//遮罩层点击隐藏事件
$("#mask"+self._id).click(function(e){
//console.info(e.currentTarget);
//console.info(e.target);
if($(e.target).hasClass("maskDiv")){
$(this).addClass("hide");
}
});
//上一张图片
//下一张图片
},
loadData:function(list){
var self=this;
//console.info(list);
var c=self._config;
var uploadServer=c.uploadFileServer;
var deleteServer=c.deleteServer;
var _html='';
for(var i=0,len=list.length;i<len;i++){
var item=list[i];
var _uuid=Math.random()+"";
_uuid=_uuid.replace(".","");
_html+='<div class="item" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)">'
+' <p id="fileName'+_uuid+'" class="itemName">'+item.name+'</p>'
+' <p><a href="javascript:void(0);"><img id="img'+_uuid+'" idata="'+item.id+'" class="itemUrl" style="width:100%;" src="'+item.url+'" /></a></p>'
//+' <p><input id="'+_uuid+'" type="file" onchange="uploadFile(this,\''+_uuid+'\',\''+uploadServer+'\')" /></p>'
+' <p><button class="btn" type="button" onclick="reViewImgGroup(\''+self._id+'\',\''+_uuid+'\',this)">预览</button> <button class="btn" type="button" onclick="deleteImg(this,'+item.id+',\''+deleteServer+'\')">删除</button></p>'
+'</div>';
}
$("#lastItem"+self._id).before(_html);
},
getItemList:function(){
var self=this;
var values=[];
var list=$(self._el).find(".item");
for(var i=0,len=list.length;i<len;i++){
var el=list[i];
var _url=$(el).find(".itemUrl").attr("src");
if(!_url||_url==""){
continue;
}
var item={
name:$(el).find(".itemName").text(),
url:_url,
sort:i
}
//console.info($(el).html());
values.push(item);
}
return values;
}
}
//封装成jquery的控件
$.fn.DropWidget=function(options){
//生成uuid
var uuid=(new Date()).getTime();
var r=(Math.random()+"").replace(".","");
uuid+=r;
var _o=$.extend({},_widget);//后面的覆盖前面的
_o._id=uuid;
_o._el=this;
var _c=$.extend({},options,$.fn.DropWidget.defaults);//后面的覆盖前面的
_o._init(_c);
return _o;
}
})();
</script>
</head>
<body>
<div id="container"></div>
<div style="clear:both;"><a id="getDataBtn" href="javascript:void(0);">获取信息</a></div>
<script>
(function(){
//初始化数据
var list=[{
id:1,
name:"图片1.jpg",
sort:1,
url:"http://img.keaitupian.cn/uploads/2021/05/25/4mth1r3dpiu.jpg!c220x220"
},{
id:2,
name:"图片2.jpg",
sort:2,
url:"https://t12.baidu.com/it/u1=4168097894&u2=1474642762&fm=76"
},{
id:3,
name:"图片3.jpg",
sort:3,
url:"https://lupic.cdn.bcebos.com/20191203/3015983714_14.jpg"
}];
//list=[];
//初始化控件
var _w=$("#container").DropWidget({
data:list,
uploadFileServer:"http://www.upload.json",
deleteServer:"http://www.delete.json"
});
//获取数据
$("#getDataBtn").click(function(){
var values=_w.getItemList();
console.info(values);
});
})();
</script>
</body>
</html>
Copy the codeThe renderings are as follows:
