DIV上下移动

最新推荐文章于 2022-08-10 14:44:23 发布

shelly2115

最新推荐文章于 2022-08-10 14:44:23 发布

阅读量1.1k

点赞数

分类专栏：页面文章标签： JavaScript HTML IDEA ViewUI

本文链接：https://blog.csdn.net/shelly2115/article/details/83682669

版权

页面专栏收录该内容

1 篇文章 0 订阅

订阅专栏

为了做一个排序的页面实现的，

能使用上下键头，调整箭头所在行的div的位置

效果：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE>DIV上下移动</TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
	function upMove(upA) {
		// 通过链接对象获取表格行的引用
		var attrValueDiv = document.getElementById("attrValueDiv");
		var row = upA.parentNode;
		var divChilds = attrValueDiv.childNodes;
		var index = parseInt(row.getAttribute('index'));
		// 如果不是第一行，则与上一行交换顺序
		if (divChilds[index - 1] && index != 0) {
			swapNode(divChilds[index], divChilds[index - 1]);
		}
	}

	function downMove(downA) {
		// 通过链接对象获取表格行的引用
		var attrValueDiv = document.getElementById("attrValueDiv");
		var row = downA.parentNode;
		var divChilds = attrValueDiv.childNodes;
		var index = parseInt(row.getAttribute('index'));
		// 如果不是最后一行，则与下一行交换顺序
		if (divChilds[index + 1]) {
			swapNode(divChilds[index], divChilds[index + 1]);
		}
	}

	function swapNode(node1, node2) {
		var parent = document.getElementById("attrValueDiv");// 父节点
		var t1 = node1.nextSibling;// 两节点的相对位置
		var t2 = node2.nextSibling;
		// 如果是插入到最后就用appendChild
		if (t1)
			parent.insertBefore(node2, t1);
		else
			parent.appendChild(node2);
		if (t2)
			parent.insertBefore(node1, t2);
		else
			parent.appendChild(node1);
		var index1 = node1.getAttribute('index');
		var index2 = node2.getAttribute('index');
		node1.setAttribute('index', index2)
		node2.setAttribute('index', index1)
	}

	function add(){
		var attrValueDiv = document.getElementById("attrValueDiv");
		var divChilds = attrValueDiv.childNodes;
		var tempHtml = '';
		tempHtml += "<div style='margin:4px;padding-left:5px;' index="
						+ divChilds.length
						+ ">"
						+ " 名称：<input type=text name='attrValueName' size=10 maxlength='50' />"
						+ " 编码：<input type=text name='attrValueCode' size=10 maxlength='50' />"
						+ "<a οnclick='upMove(this);' href='#' title='上移'><img src='up3.gif' style='border:0px;'/></a> "
						+ "<a οnclick='downMove(this);' href='#' title='下移'><img src='down3.gif' style='border:0px;'/></a></div>";
		attrValueDiv.innerHTML += tempHtml;
	}
//-->
</SCRIPT>
 <BODY>
 <input type='button' value='add' οnclick='add();'>
 <div id='attrValueDiv'>
 </div>
 </BODY>
</HTML>