用javascript实现上下两行换位效果-优快云博客

本文介绍了一种使用JavaScript实现在不刷新页面的情况下调整照片排序的方法，适用于用户交互式的相册管理场景。通过交换DOM元素的内容来达到视觉上的上下移动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我是在相片排序中有需要用到未经过DB就实现相片上移，下移，为了让用户体验(其实质效果就如这个javaEye blog中的分类管理的上移下移一样，不过这里是每次都有经过DB了！！)，所以才想着用javascript去实现它的页面效果，而最后才真正通过一个button将排序结果存入DB，重新loading page。

//整个div里面的内容上移
function upHtml(val)
{
               //这里val是传过来的一个int型值
	var replace_index = val - 1;
	var div_html = document.getElementById('div'+val).innerHTML;
	var replace_div_html = document.getElementById('div'+replace_index).innerHTML;
	//change the two innerHTML
	var save_div = replace_div_html;
	document.getElementById('div'+replace_index).innerHTML = div_html;
	document.getElementById('div'+val).innerHTML = save_div;
}

//整个div里面的内容下移
function downHtml(val)
{
                //这里val是传过来的一个int型值
	var replace_index = val + 1;
	var div_html = document.getElementById('div'+val).innerHTML;
	var replace_div_html = document.getElementById('div'+replace_index).innerHTML;
	//change the two innerHTML
	var save_div = replace_div_html;
	document.getElementById('div'+replace_index).innerHTML = div_html;
	document.getElementById('div'+val).innerHTML = save_div;
	
}

从这js可以看出，以上上移和下移的效果实际上我是通过更换它们的html源文件来实现滴！下面请看下对应上面js的简单的html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<div  id="div1">
      <IMG width="90" height="80" src="http://t2.baidu.com/it/u=1064298196,2068260633&fm=0&gp=16.jpg" border=0>
      <a href="#" onclick="downHtml(1);">down </a>
</div>
<div  id="div2">
      <IMG width="90" height="80" src="http://t2.baidu.com/it/u=1064298196,2068260633&fm=0&gp=16.jpg" border=0>
      <a href="#" onclick="upHtml(2);">up </a>
       
      <a href="#" onclick="downHtml(2);">down </a>
</div>
<div  id="div3">
      <IMG width="90" height="80" src="http://t2.baidu.com/it/u=1064298196,2068260633&fm=0&gp=16.jpg" border=0>
      <a href="#" onclick="upHtml(3);">up </a>
 </div>

</BODY>
</HTML>

　　由于需求是对所有的相片排序时，对每个相片的上移和下移开始时不重新loading页面，而又要示让用户看到效果，当所有的相片排序ok之后，才通过action将排序结果更新到DB，重新loadin。哎！可是花费了我好多时间才想到替换html源文件的方法！嗯哼！也算是自己的劳动成果吧，在此记录下来！也希望能给其它人也带来一点点的帮助吧！