基于jquery的div拖拽功能

展示效果如图:
基于jquery的div拖拽功能_第1张图片
可进行拖拽、删除,删除后div会回到上面的待拖拽区域

源码下载地址:点击这里

html代码如下:

<!-- saved from url=(0045)http://www.jq22.com/demo/jquery-tdfz20160803/ -->
<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 id="draggable1" width="110" bgcolor="peru" class="ui-draggable ui-draggable-handle">
				<div>Div1</div>
				<p>内容内容内容内容内容内容内容内容</p>
			</div> -->
			<!-- <div id="draggable2" width="110" bgcolor="lightgreen" class="ui-draggable ui-draggable-handle">
				<div>Div3</div>
				<p>内容内容内容内容内容内容内容内容</p>
			</div>
			<div id="draggable3" width="110" bgcolor="salmon" class="ui-draggable ui-draggable-handle">
				<div>Div2</div>
				<p>内容内容内容内容内容内容内容内容</p>
			</div> -->
		</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){ // 有删除图标后不再重复添加
									$('', {
										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>

你可能感兴趣的:(javaweb,div拖拽,拖拽,jquery拖拽)