基于jquery的div拖拽功能

最新推荐文章于 2022-11-13 23:54:39 发布
最新推荐文章于 2022-11-13 23:54:39 发布
阅读量526 收藏 1
点赞数
分类专栏： javaweb 文章标签： div拖拽 拖拽 jquery拖拽
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33333654/article/details/108164892
版权

展示效果如图：
在这里插入图片描述
可进行拖拽、删除，删除后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){ // 有删除图标后不再重复添加
									$('<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>
不能吃辣的JAVA程序猿
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jquery实现可拖拽布局
来一颗砂糖橘
04-28 2万+
前端实现可拖拽布局Jquery
最好用的jquery列表拖动排列(由项目提取)
weixin_30294021的博客
04-16 108
版权声明：本文为博主原创文章，未经博主同意不得转载。 https://blog.csdn.net/wuchengzeng/article/details/31766235 最好的jquery列表拖动...
html 拖拽布局插件,基于jquery的拖动布局插件
weixin_39800062的博客
06-16 212
(function($){$.fn.lsMovePanel=function(){var id=this.attr("id");var X=Y=0;var offsetX=offsetY=0;//绝对位置var OldIndex=0;///存储原始索引var Temp_Li="";var Move_obj;///当前拖动的对象$("#"+id+" li").each(function(i){$(t...
【jqgrid表格拖拽】实现jqgrid表格拖拽调整顺序功能
赏樱看雪撸代码
11-13 1110
jqgrid的表格组件支持拖拽排序
jQuery 拖拽div
ZPD_zpd的博客
02-01 1423
功能实现： 1、鼠标按下拖拽div 2、div不能超出边框 3、鼠标抬起停止拖拽 HTML实现 <div id="wrap"> <div id="box"></div> </div>
jQuery div拖拽用法实例
10-22
主要介绍了jQuery div拖拽用法,以完整实例形式分析了jQuery结合UI插件实现拖拽功能的相关技巧,需要的朋友可以参考下
jquery实现拖拽调整Div大小
10-24
里给大家分享的是一段自己编写的使用jQuery实现拽调整Div层大小的代码，非常实用，推荐给有需要的小伙伴们。
jQuery拖拽div实现思路
10-26
本文将详细介绍如何使用jQuery实现div元素的拖拽功能，主要涉及`mousedown`、`mousemove`和`mouseup`这三个事件。 首先，我们需要理解这些事件的作用： 1. `mousedown`：当鼠标按钮被按下时触发，通常用于开始一个...
jquery div容器拖拽放大缩小浮动层代码
11-10
jquery div容器拖拽放大缩小浮动层代码
jQuery实现鼠标拖拽div效果
djh052900的博客
04-06 1905
jQuery实现鼠标拖拽div效果
JQuery拖放，拖拽到指定的位置，拖拽元素，鼠标拖动
06-20
JQuery拖放，拖拽到指定的位置，拖拽元素，鼠标拖动元素到指定的对应位置
jquery 拖拽动态添加div 保存拖拽后的效果
05-29
NULL 博文链接：https://duinibuhaome.iteye.com/blog/855013
Javascript jquery 实现 拖拽， 和吸附功能
09-07
自己用js 写的拖拽div， 吸附window 边缘功能。
纯js 表格生成，拖拽选择
xiaosi1413的博客
01-14 542
纯js 表格生成，拖拽选择 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.2/css/bootstrap-grid.css" rel="stylesheet"> &
jquery实现拖拽功能
qq_45378970的博客
10-06 1168
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #box { width: 80px; height: 80px; background-color: red
【jQuery】拖曳插件——draggable
O(∩_∩)O
12-22 4768
拖曳插件draggable的功能是拖动被绑定的元素，当这个jQuery UI插件与元素绑定后，可以通过调用draggable()方法，实现各种拖曳元素的效果，调用格式如下： $(selector). draggable({options}) options参数为方法调用时的配置对象，根据该对象可以设置各种拖曳效果，如“containment”属性指定拖曳区域，“axis”属性设置拖
Jquery实现div拖拽
热门推荐
lyfclear的专栏
07-30 3万+
New Document /*模块拖拽*/ .drag{position:absolute;width:100px;height:100px;border:1px solid #ddd;background:#FBF2BD;text-align:center;padding:5px;top:100px;left:20px;cursor:move;} // 模块拖拽 $(func
jquery实现可拖动的div
yipanbo的专栏
10-26 6728
jQuery拖动层 有淡入淡出效果 #treeDiv { position:absolute; width:400px; height:300px; border:1px solid #333333; background-color:#777788; text-align:center; line-height:400%; font-size:13px; left:80
jq div拖拽
qq_39095147的博客
06-26 228
<style> .move_box { width: 450px; height: 280px; position: relative; border: 1px solid #eee; } .move_block { /*width: 30px;*/ /*height: 30px;*/ /*background-color: aq...
div添加边框拖拽功能
最新发布
10-20
可以使用JavaScript的鼠标事件来实现简单的div拖拽功能。具体实现方法可以参考以下代码： ``` var div = document.getElementById('div1'); var dragging = false; var x, y; div.addEventListener('mousedown', ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不能吃辣的JAVA程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值