一 、引入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博客
如果觉得《JQuery dad js自定义删除和拖动回调事件》对你有帮助，请点赞、收藏，并留下你的观点哦！
