javascript拖动布局 - 适合在几个容器里把容器里的元素在各个容器里拖来拖去

最新推荐文章于 2024-01-03 14:16:09 发布
最新推荐文章于 2024-01-03 14:16:09 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/micktiger/article/details/18146695
版权

近阶段项目里需要用到拖动布局，就先写个DEMO试试看，效果如下：（部分资料来源于网上）


目标：

1、有三个目标容器，如图所示，是三个竖着的虚线框，每个容器里有若干个允许拖动的元素。

2、拖动任何一个元素，可以拖放到任何一个容器内。

3、在同一个容器里拖动不改变什么。


一、先准备html页面

1、定义容器：<div class="dragitems" ></div>

2、定义容器内被拖动的元素：<div class="dragitem" id="xxxx"></div>

也就是说需要让 className为“dragitem”的DIV能在className为"dragitems"的DIV里任意拖放，对其他页面上的元素没任何要求，这样使用可以简单点。(容器的ID为任何字符串，不重复就行)

页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="drag.js"></script>
<title>js拖动布局 - 适合在几个容器里把容器里的元素在各个容器里拖来拖去</title>
<style type="text/css">
body{
margin:0px auto;
height:100%;
}
#root{
margin:0px auto;
width:770px;
}
.dragitems{
padding:5px;
width:200px;
float:left;
margin:auto 10px;
border:1px dotted #ccc;
}
.dragitem{
border:1px solid #FFCC66;
height:130px;
margin-bottom:10px;
background-color:#FFFFFF;
}
</style>
</head>
<body>
<div style="text-align:center;padding:10px;">
<a href="#" οnclick="dragUI.startDrag('dragitems','dragitem');return false;">启动拖动功能</a>
<a href="#" οnclick="dragUI.stopDrag();return false;">关闭拖动功能</a>
</div>
<div id="root">
  <div class="dragitems" id="dragitems1">
    <div class="dragitem">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tbody>
  <tr>
          <td height="30" colspan="3" bgcolor="#FFFFCC">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">1_1</td>
          <td height="30">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">　</td>
          <td height="30">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">　</td>
          <td height="30">　</td>
        </tr>
  </tbody>
      </table>
    </div>
    <div class="dragitem">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="30" colspan="3" bgcolor="#FFFFCC">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">1_2</td>
          <td height="30">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">　</td>
          <td height="30">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">　</td>
          <td height="30">　</td>
        </tr>
      </table>
    </div>
  </div>
  <div class="dragitems" id="dragitems2">
    <div class="dragitem">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="30" colspan="3" bgcolor="#FFFFCC">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">2_1</td>
          <td height="30">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30"><input name="test" type="text" id="test" /></td>
          <td height="30">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">　</td>
          <td height="30">　</td>
        </tr>
      </table>
    </div>
    <div class="dragitem">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="30" colspan="3" bgcolor="#FFFFCC">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">2_2</td>
          <td height="30">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">　</td>
          <td height="30">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">　</td>
          <td height="30">　</td>
        </tr>
      </table>
    </div>
    <div class="dragitem">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="30" colspan="3" bgcolor="#FFFFCC">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">　</td>
          <td height="30">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">2_3</td>
          <td height="30">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">　</td>
          <td height="30">　</td>
        </tr>
      </table>
    </div>
  </div>
  <div class="dragitems" id="dragitems3">
    <div class="dragitem">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="30" colspan="3" bgcolor="#FFFFCC">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">　</td>
          <td height="30">　</td>
        </tr>
        <tr>
          <td height="30">3_1</td>
          <td height="30">　</td>
          <td height="30">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">　</td>
          <td height="30">　</td>
        </tr>
      </table>
    </div>
    <div class="dragitem">
      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td height="30" colspan="3" bgcolor="#FFFFCC">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">　</td>
          <td height="30">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">　</td>
          <td height="30">　</td>
        </tr>
        <tr>
          <td height="30">　</td>
          <td height="30">　</td>
          <td height="30">3_2</td>
        </tr>
      </table>
    </div>
  </div>
</div>
</body>
</html>

二、写javascript文件

这里引用了jquery 1.7版本，老项目，更新了怕出轨。思路如下：

1、在启动拖放功能的时候，做好初始化工作。

先在body里放一个临时对象，用来存放当前拖动的元素，再把所有的允许拖动的元素绑定mousedown事件，在事件里做好初始化工作，为鼠标移动事件做准备。参考代码：

function(dragitems,dragitem){
		if(!dragitems || !dragitem){
			alert("request param");
			return;
		}
		this.dragitems = dragitems;
		this.dragitem = dragitem;
		document.onmousemove = this.mouseMove;
		document.onmouseup = this.mouseUp;
		dragUI.tempDiv = $("<div id='dragUI_tempDiv' style='position:absolute;display:none;'></div>");
		$("body").append(dragUI.tempDiv);
		$("." + dragUI.dragitem).bind("mousedown",function(){	
			var ev = dragUI.getEvent();
			dragUI.dragObj = this; //被拖动的对象
			dragUI.dragDiv = dragUI.dragObj.parentNode;//启动时存放被拖动对象的容器
			dragUI.curDragDiv = dragUI.dragObj.parentNode;//最后一个存放被拖动对象的容器
			dragUI.dragDivSize = $(dragUI.dragDiv).children("." + dragUI.dragitem).length;//计算存放被拖动对象的容器还剩下几个对象
			dragUI.mouseOffset = dragUI.getMouseOffset(dragUI.dragObj, ev);//获得鼠标的相对被拖动对象的位置
			dragUI.tempDivW = dragUI.dragObj.offsetWidth;//获取被拖动对象的宽度
			dragUI.DragContainer = $("." + dragUI.dragitems);//允许存放被拖动对象的容器列表
			return false;
		});
	}


2、定义鼠标移动事件。

在鼠标移动的时候要把被拖动的元素复制到body的临时对象里去，并让临时对象随着鼠标的位置的改变而移动。同时，需要时刻判断当鼠标的位置位于某个容器内的时候，要及时把拖动元素移动到当前的容器内。参考代码：

function(){
		var ev = dragUI.getEvent();
		var mousePos = dragUI.mouseCoords(ev);
		if (dragUI.dragObj) {
			//可拖动的个数为1,说明拖动后此列就没有拖动元素，为避免此列没有高度而不见，所以设置其高度为20px
			if (dragUI.dragDivSize == 1) dragUI.dragDiv.style.height = "32px";
			dragUI.dragObj.style.display = "none";
			//把拖动的元素加入到临时的tmpDiv中，并设置tmpDiv坐标
			dragUI.tempDiv.html("");
			var tmpnode = dragUI.dragObj.cloneNode(true);
			tmpnode.style.display = "block";
			dragUI.tempDiv.append(tmpnode).css("width",dragUI.tempDivW + "px")
										  .css("background-color","#FFF")
										  .css("top",(mousePos.y - dragUI.mouseOffset.y) + "px")
										  .css("left",(mousePos.x - dragUI.mouseOffset.x) + "px")
										  .show();
			//被拖动对象的中心点的坐标(以鼠标坐标代替)
			var dragObjCntX = mousePos.x;
			var dragObjCntY = mousePos.y;
			//判断tmpDiv所在的容器
			var dragConLen = dragUI.DragContainer.length;
			for (var i = 0; i < dragConLen; i++) {
				var curContainer = dragUI.DragContainer[i];
				var dcPos = dragUI.getPosition(curContainer);
				var dcPosMinX = dcPos.x;
				var dcPosMinY = dcPos.y;
				var dcWidth = curContainer.offsetWidth;
				var dcHeight = curContainer.offsetHeight;
				var dcPosMaxX = dcPosMinX + dcWidth;
				var dcPosMaxY = dcPosMinY + dcHeight;
				if (dragObjCntX > dcPosMinX && dragObjCntX < dcPosMaxX && dragObjCntY > dcPosMinY && dragObjCntY < dcPosMaxY) {
					if($(dragUI.curDragDiv).attr("id") != $(curContainer).attr("id")){
						dragUI.curDragDiv = curContainer;	
						curContainer.appendChild(dragUI.dragObj);
					}
					$(dragUI.dragObj).show();
					break;
				}
			}
		}
		return false;
	}


3、定义鼠标弹起事件

鼠标弹起意味着一次拖动已经结束，做好必要的清理工作，需要和数据库交互的话，相关代码应该写在这里。参考代码：

function(){
		if (dragUI.dragObj) {
			if (dragUI.dragObj.style.display == "none") dragUI.dragObj.style.display = "block";
			dragUI.tempDiv.hide();
			for (var m = 0; m < dragUI.DragContainer.length; m++) {
				var colDiv = dragUI.DragContainer[m];
				var colDivLen = $(colDiv).children("." + dragUI.dragitem).length;
				var colSty = colDiv.getAttribute("style");
				if (colDivLen > 0 && colSty != null) {
					colDiv.removeAttribute("style");
					break;
				}
			}
			dragUI.dragObj = null;
		}
	}



主要思路就是以上三点，其他的就是一些被调用到的方法。


代码打包下载： http://download.csdn.net/detail/gameoverwjl/6839913

米老虎
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js拖动拖动一个容器中的内容到另一个容器中
08-17
js拖动一个容器中的内容到另一个容器中，并且删除原容器中的该内容。
jQuery实现的跨容器无缝拖动效果代码
11-25
3. **容器布局**：在HTML结构中，定义了几个带类名的容器，如`.EZ_SITE_HEADER`、`.EZ_SITE_PAGE`、`.EZ_SITE_FOOTER`等，这些容器都设置了`position: absolute`，以便进行相对定位。同时，它们的高度和宽度被指定，...
DIV+CSS+JS实现的可以随意拖动的网页布局
热门推荐
masterShaw的博客
04-26 1万+
DIV+CSS+JS实现的可以随意拖动的网页布局丨芯晴网页特效丨CsrCode.Cn body {margin:0px;padding:0px;font-size:12px;text-align:center;} body > div {text-align:center; margin-right:auto; margin-left:auto;} .content{width:900px;
JS实现页面的拖动布局
重剑无锋，大巧不工。。。
07-21 2525
  body {margin:0px;padding:0px;font-size:12px;text-align:center;} body > div {text-align:center; margin-right:auto; margin-left:auto;} .content{width:900px;}
js实现可拖动的布局
weixin_30367169的博客
11-28 646
思路：采用flex布局，js即时修改固定列的宽度 注意：父元素需设置position:relative；因offsetLeft和offsetTop是相对于具有定位的（position:absolute或者position：relative）父级元素的距离 html： <!DOCTYPE html> <html lang="en"> <hea...
javascript拖动布局
01-12
JavaScript拖动布局是一种常见的交互设计技术，用于提升用户体验，让用户能够通过鼠标拖放操作自由地调整元素的位置。这种布局方式广泛应用于各种应用和网站，如桌面应用、网页编辑器、日历应用等。在本篇文章中，...
JavaScript 拖拽翻页效果代码
10-29
JavaScript 拖拽翻页效果是一种用户交互设计，它允许用户通过在页面上拖动鼠标来翻阅多个页面，提供了一种独特的浏览体验。这种效果通常应用于电子书、画廊或者任何需要滚动或切换内容的场景。在JavaScript和CSS的...
javascript经典特效---柱状时间显示.rar
02-05
在页面中，可能有一个div或者其他容器元素作为图表的画布，通过JavaScript来改变这些元素的宽度、高度、颜色等属性，以形成柱状图。 实现柱状时间显示的关键步骤可能包括以下几个方面： 1. 数据处理：首先，我们...
js容器内拖拽
02-08
最近项目要求托拽功能的日历模块，我那个愁啊，以前做项目就是简单的常规的内容，那接触过如此“高深”的部分啊，在网上搜到了http://www.cnblogs.com/ljchow/archive/2010/04/27/1721695.html这篇文章，实在太感谢作者了，帮了我这个菜菜鸟的大忙啊。 在此基础上我添加了对象在容器间的托拽，这是为了日历日报托拽的试验品，主要是为了完成功能，在很多方面很不成熟，后期，我加了托拽误差范围设定（就是手抖了一下下不算托拽），容器内容整体托拽等等。 代码默认的是复制托拽，怎么单纯托拽的设定，请看以上文章的设定。 至于理解也请对比文章，我实在太懒了，哈哈哈哈。
js实现DIV拖拽布局
09-08
js实现DIV拖动布局，可以用来实现自定义桌面
JS+HTML 平面区域布局 移动 拖拽
08-07
jQuery在背景平面图上创建和编辑区块，包括区块描述和颜色，支持右键快速编辑，支持背景拖拽移动和区块拖拽移动。
js实现首页拖拽布局效果
03-18
------js实现首页拖拽布局效果-------
js拖拽网格布局js特效
ICode联盟
09-25 253
js拖拽网格布局特效，可以用作图片拖拽。
利用js实现多元素拖拽
个人笔记
03-29 1493
第一种方法 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ width: 50px; height: 50px; border-radius: 50%; position: absolute; left: 0;
在html里如何用js控制两个容器中的内容互相拖拽,在js中如何实现控制文件拖拽并获取拖拽内容功能...
weixin_35990136的博客
06-05 315
本片文章主要给大家分享了用JS写出控制文件拖拽并获取拖拽内容功能实现过程，以及代码分享，有兴趣的一起学习下。在用户拖拽文件到浏览器的某个元素上时，js可以监听到与拖拽相关的事件，并对拖拽结果进行处理，本文讨论下和拖拽文件相关的一些问题，不过没有处理太多关于兼容性的问题。拖拽事件js能够监听到拖拽的事件有drag、dragend、dragenter、dragexit(没有浏览器实现)、draglea...
原生js实现多个元素的拖拽效果
最新发布
weixin_47932870的博客
01-03 685
直接上教科书式代码+注释。
在html里如何用js控制两个容器中的内容互相拖拽,如何优雅的用js动态添加html代码...
weixin_36313344的博客
06-05 204
###三种方案：1.使用DOM//使用createElement创建元素var dialog = document.createElement('div');var img = document.createElement('img');var btn = document.createElement('input');var content = document.createElement('s...
拖拽化、低代码、可视化布局学习资料搜集
weixin_37391237的博客
05-15 4885
整理收集的可视化布局平台
作为一个资深前端，请问vue-drag-resize怎么让元素在容器中间
06-02
vue-drag-resize 是一个用于实现拖拽和缩放功能的 Vue 组件库，如果您想要让拖拽和缩放的元素在容器中间，可以通过一些 CSS 样式来实现。 假设您的容器是一个固定宽高的 div，您可以将该 div 设置为相对定位...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值