ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-11-27 09:30:14  阅读:191  来源: 互联网

标签:JQuery dad 自定义 img dom function js var


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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有