这是一个简单的拖动，和树节点配合见附件
<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>
分享到：
相关推荐
在IT领域，尤其是在前端开发中，"可拖动节点树 源码"是一个非常实用的功能，它允许用户通过鼠标操作来重新组织数据结构。这个功能常见于文件管理器、组织架构图或者任务管理等应用中，使得用户可以直观地调整元素的...
"TreeView之间的节点拖动"是一个重要的功能，它允许用户通过鼠标拖放操作来重新排列节点，从而实现数据的动态修改。这个功能对于需要频繁调整结构的复杂数据系统尤其有用。 首先，我们要理解Delphi中的TreeView控件...
在这个“微软树型控件拖动节点、增加节点、删除节点等功能演示.zip”压缩包中，包含了关于如何操作和扩展树型控件的实例代码和说明。 首先，我们来详细探讨树型控件的基本操作： 1. **添加节点**：在树型控件中...
在本文中，我们将详细探讨如何在Flex的Tree组件中实现节点的拖放操作，并且限制可拖动的节点以及拖动的目标位置。 首先，我们需要了解Flex Tree组件的基本用法。Tree组件用于显示层次结构的数据，每个节点代表数据...
然而，标准的CTreeCtrl并不支持节点的拖放功能，即不能直接通过鼠标拖动来改变节点的层次关系。为了解决这个问题，"VC++ DragTreeControl 可随意拖动节点的树形控件"提供了一个定制的解决方案。 这个项目的核心在于...
在C#编程中，"树节点拖动"通常是指在用户界面（UI）中实现对树形结构数据的节点进行拖放操作。这种功能常见于各种应用，如文件管理器、程序设置界面等，允许用户通过鼠标操作自由调整树结构的层次关系。下面将详细...
这个示例项目，"TreeView中节点拖动、增加、删除等功能演示"，旨在教授如何在VB6（Visual Basic 6）环境中实现对`TreeView`控件的操作，包括节点的拖放、添加和删除等交互功能。 首先，`TreeView`控件的基本操作...
在这个实例中，Treeview被扩展以支持动态添加、删除、修改以及节点拖放操作，这些功能极大地增强了用户体验，让用户能够更直观、便捷地与数据交互。 首先，让我们详细了解Treeview的基本使用方法。在ASP.NET中，...
3. **修改层级**：树形菜单的节点可以有父节点和子节点，用户能够修改这些节点的层级，比如提升一个子节点成为父节点的同级，或者改变其在兄弟节点中的顺序。 4. **节点的名称和属性修改**：用户不仅可以改变节点的...
在这个场景中，"拖动"功能使得用户可以通过直观的手势来重新排列节点，而"Ajax"（异步JavaScript和XML）的运用则使得这些操作无需刷新整个页面就能完成，提高了用户体验和效率。 首先，我们需要理解树形结构。在...
综上所述，通过JavaScript实现漂亮且实用的拖动层窗口特效，需要结合HTML、CSS和JavaScript三方面的知识和技能。本文提供了实现此特效的基本思路和技术要点，对于希望学习和掌握网页特效开发的前端开发者来说，是一...
例如，用户可以点击节点进行展开或折叠，拖动节点重新排列，甚至可以通过鼠标悬停获取节点的相关信息。D3.js提供了一系列事件处理函数，如`on('click')`和`on('mouseover')`，便于开发者添加这些交互功能。 4. **...
这个特性指的是当用户尝试将一个节点拖放到树视图中的其他位置时，系统能自动判断是否需要展开目标节点以容纳被拖动的节点。这种智能判断通常是通过自定义的逻辑实现的，可能涉及到对CTreeCtrl的成员函数如Expand、...
JavaScript拖动层Div是网页开发中的一个常见功能，它允许用户通过鼠标拖动来改变Div元素的位置。在本文中，我们将深入探讨如何实现这个功能，以及相关的核心代码和原理。 首先，实现JavaScript拖动层Div的基本步骤...
在IT领域，尤其是在开发用户界面（UI）时，"拖动树节点"是一个常见的功能需求。这通常涉及到图形用户界面（GUI）中的可交互元素，尤其是数据结构展示，如文件管理器、组织架构图或者软件工程中的依赖关系图。在这个...
Wpf画流程图项目，功能齐全（免积分下载）详情看我...3、点击图形节点拖拽可以连接其他图形节点 4、可以撤销步骤 5、可以保存文件 6、可以运行流程（开始、暂停、结束），底部有运行输出 7、代码注释详细，模块层次清晰
节点之间通过拖动三角尖连接来建立数据流，数据会从一个节点流向下一个节点，直至工作流完成所有数据处理任务。 四、KNIME工作流设计 KNIME工作流是通过一系列节点的组合来设计的，每个节点负责数据处理流程中的一...
* KNIME 中的最小操作单元是节点，节点可以单击、双击、拖动三角尖连接等操作。 * 节点可以在 NODE DESCRIPTION 中看到详细描述。 二、节点分析 * IO 节点：用于文件、表格、数据模型的输入和输出操作，支持多种...
用户可以拖动节点到不同的位置，系统会自动处理移动节点的逻辑，保持树的正确性。 6. **源码分析**：通过阅读和理解源码，我们可以深入学习ExtJS的事件处理机制、数据绑定、组件间通信以及自定义组件的方法。这对于...