基于jquery的div拖拽功能

一时失言乱红尘 2022-11-30 00:21 155阅读 0赞

展示效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMzNjU0_size_16_color_FFFFFF_t_70_pic_center]  
可进行拖拽、删除，删除后div会回到上面的待拖拽区域

源码下载地址：[点击这里][Link 1]

html代码如下：

<html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    		<title>jqeruy UI 拖拽</title>
    
    		<script type="text/javascript" src="./jQuery1.11.3.min.js"></script>
    
    		<script type="text/javascript" src="./jquery-ui.js"></script>
    
    		
    
    		<style>
    			*{ 
    				margin:0;
    				padding:0;
    			}
    			table { 
    				border-collapse: collapse;
    			}
    
    			table td { 
    				empty-cells: show
    			}
    			#dragBox{ 
    				width: 100%;
    				height: 300px;
    				overflow-x: scroll;
    				overflow-y: scroll;
    			}
    			div[id^="draggable"]{ 
    				position: relative;
    				float: left;
    				background: peru;
    				font-size: 14px;
    				width: 100px;
    				height: 50px;
    				line-height: 25px;
    				color:#fff;
    				text-align: center;
    				margin:5px;
    				padding: 5px;
    			}
    			div[id^="draggable"] div,div[id^="draggable"] p{ 
    				width: 100%;
    				overflow: hidden;
    				text-overflow: ellipsis;
    				white-space: nowrap;
    			}
    			.button{ 
    				width: 80px;
    				height:30px;
    				border: 1px solid #999;
    				border-radius: 8px;
    			}
    			:focus{ 
    				outline: 0;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<button class="button">8*8</button> <button class="button">12*12</button>
    		<div id="dragBox" style="margin-bottom: 50px;">
    			
    			
    		</div>
    		
    		
    		<table border="1" id="tableBox">
    			
    		</table>
    		
    		<script type="text/javascript" language="javascript">
    			//在页面加载完之后加载jquery
    			$().ready(function(e) { 
    				(function init(){ 
    					getData(8,8);
    				})()
    				
    				//数据请求
    				function getData(x,y){ 
    					//
    					//模拟数据
    					let data = { 
    						tHead: ["第一列","第二列","第三列","第四列","第五列","第六列","第七列","第八列","第九列","第十列","第十一列","第十二列"],
    						tDs: ["第一排","第二排","第三排","第四排","第五排","第六排","第七排","第八排","第九排","第十排","第十一排","第十二排"],
    						list:[{ 
    							id: "021215454212",
    							info: { 
    								a: "Div1",
    								b: "内容内容内容内容"
    							}
    						},
    						{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},{ 
    							id: "021321434212",
    							info: { 
    								a: "Div2",
    								b: "wewew"
    							}
    						},
    						]
    					};
    					//拿到数据后 将数据放入可拖拽仓库
    					dragBoxFun(data,x*y)//data 为请求返回数据
    					createElementFun(x,y,data);
    					drag();
    				}
    				
    				//可拖拽仓库
    				function dragBoxFun(data,n){ 
    					let dragBox = document.getElementById("dragBox");
    					dragBox.innerHTML = '';
    					
    					
    					//循环拿到的数据
    					for(let i in data.list){ 
    						if(i>=n){ //只留下铺满表格之后的数据
    							let odiv = document.createElement("div");
    							odiv.id = 'draggable'+ i;
    							odiv.className = "ui-draggable ui-draggable-handle";
    							odiv.setAttribute("width","110");
    							odiv.setAttribute("bgcolor","peru");
    							odiv.setAttribute("idData",data.list[i].id);//  这里绑定每条数据的id值,  后续操作每个格子的数据 可以找这个id
    							
    							let od = document.createElement("div");
    							od.innerHTML = data.list[i].info.a;
    							
    							let op = document.createElement("p");
    							op.innerHTML = data.list[i].info.b;
    							
    							odiv.appendChild(od);
    							odiv.appendChild(op);
    							
    							dragBox.appendChild(odiv);
    						}
    						
    					}
    				}
    				
    				
    				
    				
    				//初始化表格并添加数据
    				function createElementFun(x,y,data){ 
    					let targetTable = document.getElementById('tableBox');
    					targetTable.innerHTML = '';//每次点击按钮清空
    					
    					//表头
    					let oth = [""]
    					let tHead = document.createElement("tr");
    					tHead.setAttribute("height","40");
    					tHead.className = "t-head";
    					for(let i = 1; i <= y; i ++){ 
    						let hTd = document.createElement("td");
    						hTd.setAttribute("width","110");
    						hTd.innerHTML = data.tHead[i-1];//这里塞表头名
    						tHead.appendChild(hTd);
    					}
    					targetTable.appendChild(tHead);
    					
    					
    					
    					//表格内容
    					for(let r = 1; r <= x; r++){ 
    						let tr = document.createElement("tr");
    						tr.setAttribute("height","40");
    						for(let i = 1; i <= y; i ++){ 
    							let td = document.createElement("td");
    							td.id = "target" + i+r;
    							td.className = "ui-droppable";
    							td.setAttribute("width","110");
    							let tdHtml = "";
    							if(data.list[(r-1)*y+i-1]){ 
    								const m = (r-1)*y+i;
    								tdHtml = `<div id="draggable${m}" width="110" bgcolor="salmon" class="ui-draggable ui-draggable-handle" onmouseleave="hideImg(this)" onmouseenter="showImg(this)"> <div>${ data.list[(r-1)*y+i-1].info.a}</div> <p>${ data.list[(r-1)*y+i-1].info.b}</p> <img src="btn_delete.png" style="display:none;position:absolute;right:42px;top:17px;z-index:100" onclick="deleteFun(this)"/> </div>`
    							}
    							
    							td.innerHTML = tdHtml;//这里塞每个表格内容
    							tr.appendChild(td);
    						}
    						targetTable.appendChild(tr);
    					} 
    					
    					//列名
    					data.tDs.unshift("");
    					for(let t = 0; t <= x; t++){ 
    						let otd = document.createElement("td");
    						otd.setAttribute("width","110");
    						otd.innerHTML = data.tDs[t];
    						var first = targetTable.getElementsByTagName("tr")[t].firstChild;//得到页面的bai第一个元素du。    
    
                            targetTable.getElementsByTagName("tr")[t].insertBefore(otd,first);//在得到的第一个元素之前插入。
    					}
    					
    				}
    				
    				//拖拽
    				function drag(){ 
    					//拖拽复制体
    					$('div[id^="draggable"]').draggable({ 
    						revert: 'invalid',
    						cursor: "move",
    						drag: function(event, ui){ 
    							console.log(ui.helper.find("img").hide())
    						}
    					});
    					//释放后
    					$('td[id^="target"]').droppable({ 
    						drop: function(event, ui) { 
    							var source = ui.draggable;
    							source.css({ 
    								left:0,
    								right:0,
    								bottom:0,
    								top:0,
    								zIndex:100
    							})
    							if(event.target.children.length > 0){ //如果拖动的位置有内容了,就交换位置
    								
    								let container = source.parent();
    								if(container[0].nodeName == "TD"){ //拖拽元素交换位置必须是表格内的
    									let temp = document.createElement("div");//创建空元素暂存拖拽位置的元素
    									$(temp).append($(this).children())
    									
    									$(this).children().remove() //拖拽目标位置
    									
    									container.append($(temp).children())
    									
    									$(this).append(source)
    									
    									container.append($(temp).children())
    								}
    								
    								
    							}else{ //如果拖动位置没有内容就将元素添加进表格
    								
    								if(!source.find("img").length){  // 有删除图标后不再重复添加
    									$('<img/>', { src: 'btn_delete.png', style: 'display:none;position:absolute;right:42px;top:17px;z-index:100', click: function() { 
    											source.parent().html('');
    											source.find('img').remove()
    											$("#dragBox").append(source)
    											$('div[id^="draggable"]').draggable({ 
    												revert: 'invalid',
    												cursor: "move"
    											});
    										}
    									}).appendTo(source);
    								}	
    								source.mouseenter(function() { 
    									$(this).find("img").show();
    								});
    										
    								source.mouseleave(function() { 
    									$(this).find("img").hide();
    								});
    								$(this).append(source);
    							}
    						}
    					});
    				}
    				
    				
    				//button点击
    				$(".button").click(function(){ 
    					
    					let x = $(this).text().split("*")[0]
    					let y = $(this).text().split("*")[1]
    					getData(x,y);//每次点击重新获取数据好了
    				})
    				
    				
    				
    			});
    			
    			function deleteFun(d){ 
    				$("#dragBox").append($(d).parent())
    				$(d).remove()
    			}
    			function showImg(d){ 
    				$(d).find("img").show()
    			}
    			function hideImg(d){ 
    				$(d).find("img").hide()
    			}
    		</script>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMzNjU0_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/2dc9e969a09a44cf89b73bc61d20b361.png
[Link 1]: https://download.csdn.net/download/qq_33333654/12737188