jquery实现元素在两个容器间来回移动

最新推荐文章于 2022-07-08 15:47:20 发布

william_djj

最新推荐文章于 2022-07-08 15:47:20 发布

阅读量1.5k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/william_djj/article/details/84563408

版权

js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

假设两个容器（用div模拟）的id分别是ul_all_tags 和ul_sel_tags ，鼠标点击其中的一个就会移动到另一个容器中。

先看一下可用的代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>

<script src="_js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

function fun(a)
{	
	if(a.parent().attr('id')=="ul_all_tags")
	{	
		a.appendTo("#ul_sel_tags");		
	}
	else
	{	
		a.appendTo("#ul_all_tags");		
	}
	//a.css('background-color', 'gray' );//在ie浏览器中要加这个，否则移动后还是鼠标停留的颜色
}

$(document).ready(function(){
	$('li').hover(function(){			
		$(this).css(
			{	'background-color':'green',
				'cursor':'hand'
			});
		},function(){
		$(this).css(
			{	'background-color':'gray',
				'cursor':'pointer'
			});
		});
});

$(document).ready(function(){
	$("#ul_all_tags > li").click(function(){
		fun($(this));

  	});
	$("#ul_sel_tags > li").click(function(){
		fun($(this));
  	});
});

</script>
<style>
li {
  padding: 0 3px;
  float: left;
  list-style: none;
  margin: 10px;
  background-color:gray;
}

.c_div1,.c_div2 {
	width: 400px;
	height: 260px;
	/*text-align: center;*/
}

.c_div1 {
	
	background-color:#BBFFFF;
}
.c_div2 {
	
	background-color:#FFBBBB;
}
</style>
</head>

<body>

  <div  class="c_div1">
	  <ul id="ul_all_tags">
		  <li>tags1</li>
		  <li>tags2</li>
		  <li>tags3</li>
	</ul>
  </div>
  

  <div  class="c_div2">
	  	<ul id="ul_sel_tags">
			<li>a</li>
		  <li>b</li>
		  <li>c</li>
	</ul>
  </div>

  
</body>
</html>

上面代码关键部分：

function fun(a)

{

if(a.parent().attr('id')=="ul_all_tags")

{

a.appendTo("#ul_sel_tags");

}

else

{

a.appendTo("#ul_all_tags");

}

$(document).ready(function(){