拖动层节点

最新推荐文章于 2023-05-15 10:11:46 发布
最新推荐文章于 2023-05-15 10:11:46 发布
阅读量68 收藏
点赞数
分类专栏： AJAX-JS 文章标签： HTML
这是一个简单的拖动，和树节点配合见附件 

<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>


iteye_13299
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现拖拽功能
xiaoba_598的博客
06-02 2627
盒子拖拽 &amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;gt; &amp;amp;amp;lt;html&amp;amp;amp;gt; &amp;amp;amp;lt;head lang=&amp;amp;quot;en&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;meta charset=&amp;amp;quot;UTF-8
python画流程图模块 节点拖动_使用Graphviz快速绘制流程图
weixin_39620278的博客
11-20 577
简介自己在绘制流程图的时候一般用到的是Visio，但是感觉连线以及框图位置调整起来很烦…经过一番了解之后发现了Graphviz可以使用Python代码来绘制流程图的软件，使用这个工具我们可以更专注于关系之间的表示而不是绘制的方法。先来看看一个神经网络的效果图吧：（Ref:https://blog.csdn.net/ztguang/article/details/77451803）：下载安装对于Py...
JS DOM节点增删改查
banbi8040的博客
04-24 245
增： var a = document.createElement('p'); //创建一个P标签 var b = doucument.getElementById('box'); //获取一个ID为box的元素 b.appendChild(a); //将a作为子节点插入到b节点中 删： 只能使用JS中moveChild()方法删除指定的节点 b.moveChild...
vue 实现图片的放大缩小(以鼠标位置为中心放大缩小)以及拖拽功能
热门推荐
HHH917的博客
08-13 1万+
先看效果 （最下面会贴出完整的组件源码） 图片 放大缩小(以鼠标位置为中心放大缩小) 的实现 直接贴出代码，实现原理 代码注释有提到！（可能有兼容问题，兼容问题自行修改） fnWheel(oImg, function (down, oEvent) { var oldWidth = this.offsetWidth; var oldHeight = this.offsetHeight; var oldLeft = this.offsetLeft;
AE 实现节点拖动
guzicheng1990的博客
08-07 1144
此处treeview模拟TOC控件，实现节点拖动，图层变换功能 备注：此处在treeview添加节点，需用"Nodes.Insert(0,A)”，不用"Nodes.Add(A)"，因为AE添加图层顺序有关。（A为节点名） AE默认将新加的图层添加在axMapControl控件最上方，而Nodes.Add默认将节点添加在最下方。 /// <summary> ...
EasyUI Tree节点拖动到指定容器
apollokk的专栏
01-03 4023
效果图：将tree节点拖动到指定的DIV中，结果显示节点的id和text 代码： Drag Drop Tree Nodes - jQuery EasyUI Demo Drag Drop Tree Nodes Press mouse down and drag a node to another
chart 完成拓扑图单节点拖拽不影响其他节点位置
菜鸡奋斗ing的博客
04-22 3475
就是做这种的功能，箭头原本是可以动态重复移动的，但不知道哪里问题导致没箭头了，然后补了个edgeSymbol: ['','arrow'], 字段，才增加了箭头。 拖拽某个节点，只有关联到的线条会跟着变动其他的节点位置不变。 参考 https://gallery.echartsjs.com/editor.html?c=x8Fgri22P9 https://echarts.baidu.com/exam...
前端：Element 节点
Jadeon
11-29 1256
实例属性 元素特性的相关属性 （1）Element.id Element.id属性返回指定元素的id属性，该属性可读写。 // HTML 代码为 &lt;p id="foo"&gt; var p = document.querySelector('p'); p.id // "foo" 注意，id属性的值是大小写敏感，即浏览器能正确识别&lt;p id="foo"&gt;和&lt;p ...
树状图 标签节点拖拽
qq_53513969的博客
05-15 700
利用antv-g6实现树状图的标签节点拖拽功能
div拖动改变大小
漫天雪_昆仑巅
04-07 7296
最近在做个页面，需要首页模块可拖动并且编辑大小，首页用到的基本上是div标签， 由于个人不是搞前端的，js真心不是很熟~~~，网上搜索了一些资料，基本上都不完整，都有一定的缺少部分！ 于是自己结合网上的多篇资料，整合了一份，可以div拖动改变大小的html代码例子，有这方面需要的可以参考下： 以下是效果图： Html代码如下（直接复制保存为html文件即可运行）： <!DOC...
JavaScript实现可拖拽的拖动层Div实例
12-02
这是一个完美的JS拖拽效果，带拖尾的JavaScript拖动层代码，经过了多次优化修正，复制节点的方法不错，值得JS爱好者学习，同时代码修正了给拖拽元素加ondblclick事件无效的问题，兼容多种浏览器，拷贝代码即可运行...
Wpf画流程图项目，功能齐全，鼠标拖拽工具到画布，拖拽节点连接，可以撤销，保存等等
08-04
Wpf画流程图项目，功能齐全（免积分下载）详情看我...3、点击图形节点拖拽可以连接其他图形节点 4、可以撤销步骤 5、可以保存文件 6、可以运行流程（开始、暂停、结束），底部有运行输出 7、代码注释详细，模块层次清晰
div层的移动及性能优化
12-12
同样如果一个页面结构很复杂或者电脑... 这样可以减轻浏览器绘制div层的负担，不至于拖动时每时每刻都在移动，其实太短了人眼也感觉不到变化，延迟间隔可以自己根据体验设置。 代码如下: function Endrag(source,targ
IE之动态添加DOM节点触发window.resize事件
01-19
比如我拖动一个层,在拖动过程中层的内容又显示在最底下了,当我放开层的时候这个层就跳回拖动前的位置了… 起先我还没看出来是重布局了…然后演示了N久,挣扎了N久,终于觉得可能是由于动态增加DOM节点导致触发window....
node-v0.10.31-sunos-x86.tar.gz
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
node-v0.10.44-linux-x86.tar.gz
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
30KW三相PFC充电桩充电模块项目开发设计方案CCS源码AD原理图bom测试报告
05-16
30KW三相PFC充电桩项目开发设计方案CCS源码AD原理图bom测试报告
node-v0.10.32-x64.msi
最新发布
05-16
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
echart graph 节点拖动
01-22
echarts是一个数据可视化库，其中的graph图表可以实现节点拖动的交互功能。在echarts中，节点拖动是通过鼠标交互来实现的。用户可以通过鼠标左键点击并拖动节点，来改变节点在图表中的位置。这种交互方式使用户可以动态地调整节点的位置，从而更直观地理解图表中的数据关系。 要实现节点拖动功能，首先需要将graph图表中的节点设置为可拖动。可以通过echarts提供的配置项和事件来实现这一功能。在配置项中，可以设置节点的draggable属性为true，表示节点可以拖动。同时，可以监听节点的拖动事件，比如dragstart、dragging和dragend事件，来响应用户的拖动操作并更新节点的位置信息。 除了设置节点的拖动功能外，还可以通过配置项来限制节点的拖动范围，比如限制只能在特定的区域内拖动节点。这样可以更精确地控制节点的位置，并确保节点不会超出预期的范围。 在用户拖动节点的过程中，还可以通过echarts提供的tooltip功能来实时显示节点的相关信息，比如节点的名称、数值等。这样用户在拖动节点时可以清晰地了解节点所代表的数据，帮助用户更好地理解图表内容。 总之，echarts中的graph图表节点拖动功能为用户提供了一种直观、灵活的交互方式，使用户能够自由地调整节点的位置，更深入地探索和理解图表中的数据关系。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值