JQuery dad js自定义删除和拖动回调事件

一 、引入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,自定义,img,dom,function,js,var
来源： https://blog.csdn.net/u010989191/article/details/121572484