拖动层节点

最新推荐文章于 2025-08-08 11:44:42 发布

最新推荐文章于 2025-08-08 11:44:42 发布 · 106 阅读

文章标签：

#HTML

AJAX-JS 专栏收录该内容

15 篇文章

订阅专栏

这是一个简单的拖动，和树节点配合见附件


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>树目录管理</title>
<script language="javascript" >

	function  DragControl(){
		this.target=null;//移动的目标父节点
		this.moveChild=null;//移动的节点

		this.setPosition=setPosition;//设置对象的位置

		this.beginDrag=beginDrag;//准备移动
		this.endDrag=endDrag;//结束移动

		this.createNewNode=createNewNode;//创建一个新的节点
		this.beginX=null;
		this.beginY=null;
		this.isDrag = true;
		this.copeChild=null;
	}
	var dragControl = new DragControl();

/*
*他建一个节点
*/
	function createNewNode(tagName,text){
		var divChild = document.createElement(tagName);
		divChild.innerText=text;
		divChild.style.border="1px solid #000000";
		//divChild.style.width="200px";
		divChild.style.whiteSpace="nowrap";
		divChild.style.fontSize="12px";
		return divChild;
	}

	/**
	设定层对象的绝对位置，注意层的obj.style.position="absolute";
	*/
	function setPosition(obj){

		obj.style.posLeft=window.event.x+5;
		obj.style.posTop=window.event.y+10;
	}


	/*
	开始拖动
	*/
	function beginDrag(divChild){

		window.event.cancelBubble = true;
		this.beginX=window.event.x;
		this.beginY=window.event.y;

		//注册动作
		document.onmouseup=function(){
			dragControl.endDrag();
		};

		 document.onmousemove=function(){

		 //防止文本被选中
		 	document.onselectstart=function(){
				return false;	
			};

			//拖动一定范围后再触发
		 	 if(window.event.x < dragControl.beginX - 5 || window.event.x > dragControl.beginX + 5 || window.event.y < dragControl.beginY -5 || window.event.y > dragControl.beginY + 5 ) {

			 	if(dragControl.isDrag){
					dragControl.copeChild = createNewNode("div",divChild.innerText);
					dragControl.copeChild.style.position = "absolute";
					dragControl.copeChild.style.filter = "alpha(opacity='60')";
					document.body.appendChild(dragControl.copeChild);
					dragControl.setPosition(dragControl.copeChild);
					dragControl.moveChild=divChild;//设定目标源
					dragControl.isDrag=false;
				}

		 		dragControl.setPosition(dragControl.copeChild);

			}else{
				if(dragControl.copeChild && dragControl.copeChild !=null){
					dragControl.setPosition(dragControl.copeChild);
				}
			}

		 };

	}


	function endDrag(){
		this.target = event.srcElement;
		while(this.target.tagName!="BODY" && this.target.tagName!="DIV" && this.target){
			this.target=this.target.parentNode;
		}
		//alert(target.tagName+";"+target.innerText);
		if(this.target.tagName=="DIV" && this.moveChild !=null && this.target!=this.moveChild){
			//target.parentNode.appendChild(moveChild);
			this.target.appendChild(this.moveChild);
			this.moveChild.style.position="static";

		}
		if(this.copeChild!=null)
			this.copeChild.removeNode(true);


		window.event.cancelBubble=false;
		document.onmousemove=null;
		document.onmouseup=null;

		this.target=null;
		this.moveChild=null;
		this.beginX=null;
		this.beginY=null;
		this.isDrag=true;
		this.copeChild=null;
	}

	function hightlight(obj){
		window.event.cancelBubble=true;
		obj.style.border="1px solid #ff0000";
		obj.style.fontWeight="bolder";
	}

	function reset_(obj){
		window.event.cancelBubble=true;
		obj.style.border="1px solid #000000";
		obj.style.fontWeight="normal";

	}
</script>


</head>

<body>
<div id="root"  style="border:1px solid #000000; width:200px;" onMouseDown="dragControl.beginDrag(this);" onMouseOut="reset_(this);" onMouseOver="hightlight(this);">
	目录树根
		<div id="ch1" style="border:1px solid #000000; width:200px;" onMouseDown="dragControl.beginDrag(this);" onMouseOut="reset_(this);" onMouseOver="hightlight(this);">
			节点1
		</div>
		<div id="ch2" style="border:1px solid #000000; width:200px;" onMouseDown="dragControl.beginDrag(this);"  onmouseout="reset_(this);" onMouseOver="hightlight(this);">
			节点2
			<div id="ch3" style="border:1px solid #000000; width:200px;" onMouseDown="dragControl.beginDrag(this);" onMouseOut="reset_(this);" onMouseOver="hightlight(this);">
				节点3
			</div>
		</div>
</div>

<div style="border:1px solid #000000;position:static;left:50px;top:10px;" onMouseDown="dragControl.beginDrag(this);" onMouseOut="reset_(this);" onMouseOver="hightlight(this);">
	用来添加的
</div>
</body>

</html>