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

最新推荐文章于 2024-08-20 15:21:55 发布

米老虎

最新推荐文章于 2024-08-20 15:21:55 发布

阅读量1.7k

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/micktiger/article/details/18146695

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

近阶段项目里需要用到拖动布局，就先写个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