实现一个页面的多个文本框拖拽互换位置效果

liuzuowei007 2010-04-28 11:00:39

就是一个页面假如有两个文本框A和B
现在我想要拖拽A到B的位置
然后松开鼠标实现A到B的位置B到A的位置（位置互换）
我想要这种效果有没有牛人给个效果的例子或者部分代码给我参考参考呢？
谢谢大家了

...全文

263 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

Mr-Jee 2010-04-28

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>无标题文档</title>

<script type="text/javascript" language="javascript" src="jquery-1.4.2.min.js"></script>

<script type="text/javascript" language="javascript">

	var pos;								

	var tag = 0;

	var dom;

	var rec;

	$(function()	{

		$("div").mousedown(function()	{

										dom = $(this);

										rec = $(this).offset();

										tag = 1;

									});

		$("div").mouseup(function()	{

								  		dom = $(this);

										//alert(1);

										tag = -1;

								  });

		$("body").mousemove(function(ev)	{

							 	pos = {

										x:ev.clientX,

										y:ev.clientY

									};



								function begin()	{

									if(tag == 1)	{

										dom.offset({top:pos.y,left:pos.x});

									}

								}

								function end()	{

									if(tag == -1)	{

										$("div").each(function()	{

															   //alert($("div").length);

															   	if ($(this).attr("id") != dom.attr("id"))	{

																		

																		var tmp = $(this).offset();

																		if((pos.x > tmp.left) && (pos.x < (tmp.left + $(this).width())) && (pos.y > tmp.top) && (pos.y < (tmp.top + $(this).width())))	{																																		

							dom.offset($(this).offset());

							$(this).offset(rec);

							tag = 0;

							dom = null;

							rec = null;

							}

																	} else	{

																		dom.offset(rec);

																	}

															   });

									}

								}

								begin();

								end();

			   });

							 });





</script>

</head>



<body>

	<div id="a" style="height:100px; width:100px; background-color:yellow;">a</div>

    <div id="b" style="height:100px; width:100px; background-color:blue;">b</div>

</body>

</html>