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

Posted 2022-02-03 HiveDark

一 、引入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博客