实现一个页面的多个文本框拖拽互换位置效果解决方案
实现一个页面的多个文本框拖拽互换位置效果
就是一个页面假如有两个文本框A和B
现在我想要拖拽A到B的位置
然后松开鼠标 实现A到B的位置B到A的位置（位置互换）
我想要这种效果 有没有牛人给个效果的例子或者部分代码给我参考参考呢？
谢谢大家了
------解决方案--------------------
就是一个页面假如有两个文本框A和B
现在我想要拖拽A到B的位置
然后松开鼠标 实现A到B的位置B到A的位置（位置互换）
我想要这种效果 有没有牛人给个效果的例子或者部分代码给我参考参考呢？
谢谢大家了
------解决方案--------------------
- JScript code
<!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>
------解决方案--------------------