一 、引入JQuery.dad.js,不要引入JQuery.dad.min.js。下载地址:GitHub - williammustaffa/jquery.dad.js: DAD: A simple and awesome Drag And Drop plugin!。
二、定义parentDiv和子Div。
三、初始化拖动。
var myAction = {};
var dom = {
dad: $(previewId),
delete: $('.img-delete')
}
$.extend(myAction,{
initDad: function () {
dom.dad.dad();
},
initEvent: function () {
// 拖动结束
dom.dad.on("dadDragEnd", function(e){
setTimeout(function(){
var srcs = [];
dom.dad.find("img.layui-upload-img").each(function(index, img){
srcs.push($(img).attr("src"));
});
// 更新值
$("input[name="+inputName+"]").val(srcs.join(","));
},500);
});
// 删除功能
dom.delete.on('click', function () {
var that = $(this);
// 获取删除元素的地址
var divNode = that.parent();
var alt = $(divNode).find("img").attr("alt");
var valueArr = $("input[name="+inputName+"]").val().split(",");
// 更新input输入框的值
for(var i=0;i<valueArr.length;i++){
if(-1 != valueArr[i].indexOf(alt)){
valueArr.splice(i, 1);
break;
}
}
$("input[name="+inputName+"]").val(valueArr.join(","));
// 删除当前图片
that.parent().remove();
});
}
});
var init = function () {
myAction.initDad();
myAction.initEvent();
}();
四、参考博客。
拖拽插件jquery.dad.js_徐同保的专栏-CSDN博客