jquery div 交换
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<title>拖动</title>
<style>
body
{
-moz-user-select: none;
}
td
{
width: 20%;
height: 20px;
border-bottom: 1px solid black;
border-right: 1px solid black;
cursor: default;
}
div
{
font-size: 13px;
}
th
{
height: 20px;
font-size: 12px;
font-weight: normal;
border-bottom: 2px solid black;
background-color: #CCCCCC;
}
table
{
border: 1px solid black;
font-size: 13px;
}
</style>
<script language="javascript">
$(document).ready(function () {
$(document).bind("contextmenu", function (e) { return false; });
$(document).bind("selectstart", function () { return false; });
DragedTable();
});
/************************************ dragedTableData.js *******************************/
/************************************ dragedTableData.js *******************************/
/*
* created by LxcJie 2004.4.12
* 可以实现表格内容的内部拖动
* 确保中间过度层的存在，id为指定
*/
/*--------全局变量-----------*/
var dragedTable_x0, dragedTable_y0, dragedTable_x1, dragedTable_y1;
var dragedTable_movable = false;
var dragedTable_preCell = null;
var dragedTable_normalColor = null;
//起始单元格的颜色
var dragedTable_preColor = "lavender";
//目标单元格的颜色
var dragedTable_endColor = "#FFCCFF";
var dragedTable_movedDiv = "dragedTable_movedDiv";
/*--------全局变量-----------*/
function DragedTable() {
var oTempDiv = $('<div></div>');
oTempDiv.attr("id", dragedTable_movedDiv);
oTempDiv.disableSelection();
oTempDiv.css("cursor", "hand");
oTempDiv.css("position", "absolute");
oTempDiv.css("border", "1px solid black");
oTempDiv.css("backgroundColor", dragedTable_endColor);
oTempDiv.css("display", "none");
$('body').append(oTempDiv); //添加到body元素的最后.
$("#tableId").bind("mousedown", function (event) {
showDiv(event);
});
}
//得到控件的绝对位置
function getPos(cell) {
var pos = new Array();
var t = cell.offsetTop;
var l = cell.offsetLeft;
while (cell = cell.offsetParent) {
t += cell.offsetTop;
l += cell.offsetLeft;
}
pos[0] = t;
pos[1] = l;
return pos;
}
//显示图层
function showDiv(event) {
var obj = $(event.target);
var pos = new Array();
//获取过度图层
var oDiv = $("#" + dragedTable_movedDiv);
// alert(jqobj.get(0).nodeName.toUpperCase());
if (obj.get(0).nodeName.toUpperCase() == "TD") {
obj.css("cursor", "hand");
pos = getPos(obj.get(0));
oDiv.css("width", obj.get(0).offsetWidth + "px");
oDiv.css("height", obj.get(0).offsetHeight + "px");
oDiv.css("top", pos[0] + "px");
oDiv.css("left", pos[1] + "px");
oDiv.text(obj.text());
oDiv.css("display", "block");
dragedTable_x0 = pos[1];
dragedTable_y0 = pos[0];
dragedTable_x1 = event.clientX;
dragedTable_y1 = event.clientY;
dragedTable_normalColor = obj.css("backgroundColor");
obj.css("backgroundColor", dragedTable_preColor);
dragedTable_preCell = obj.get(0);
dragedTable_movable = true;
}
}
function dragDiv(event) {
if (dragedTable_movable) {
var oDiv = $("#" + dragedTable_movedDiv);
var pos = new Array();
oDiv.css("top", event.clientY - dragedTable_y1 + dragedTable_y0 + "px");
oDiv.css("left", event.clientX - dragedTable_x1 + dragedTable_x0 + "px");
for (var i = 0; i < $("#tableId td").size(); i++) {
var currentTD = $("#tableId td").eq(i);
var DOMcurrentTD = currentTD.get(0);
pos = getPos(DOMcurrentTD);
if (event.pageX > pos[1] && event.pageX < pos[1] + DOMcurrentTD.offsetWidth
&& event.pageY > pos[0] && event.pageY < pos[0] + DOMcurrentTD.offsetHeight) {
if (DOMcurrentTD != dragedTable_preCell)
currentTD.css("backgroundColor", dragedTable_endColor);
}
else {
if (DOMcurrentTD != dragedTable_preCell)
currentTD.css("backgroundColor", dragedTable_normalColor);
}
}
}
}
function hideDiv(event) {
if (dragedTable_movable) {
var pos = new Array();
if (dragedTable_preCell != null) {
for (var i = 0; i < $("#tableId td").size(); i++) {
var currentTD = $("#tableId td").eq(i);
var DOMcurrentTD = currentTD.get(0);
pos = getPos(DOMcurrentTD);
//计算鼠标位置，是否在某个单元格的范围之内
if (event.pageX > pos[1] && event.pageX < pos[1] + DOMcurrentTD.offsetWidth
&& event.pageY > pos[0] && event.pageY < pos[0] + DOMcurrentTD.offsetHeight) {
if (DOMcurrentTD.tagName.toLowerCase() == "td") {
//交换文本
var JqPreCell = $(dragedTable_preCell);
var precurrentTDText = JqPreCell.text();
JqPreCell.text(currentTD.text());
currentTD.text(precurrentTDText);
//清除原单元格和目标单元格的样式
JqPreCell.css("backgroundColor", dragedTable_normalColor);
currentTD.css("backgroundColor", dragedTable_normalColor);
currentTD.css("cursor", "");
JqPreCell.css("cursor", "");
}
}
}
}
dragedTable_movable = false;
//清除提示图层
var oDiv = $("#" + dragedTable_movedDiv);
oDiv.css("display", "none");
}
}
$(document).mouseup(function (event) {
hideDiv(event);
for (var i = 0; i < $("#tableId td").size(); i++) {
var currentTD = $("#tableId td").eq(i);
currentTD.css("backgroundColor", dragedTable_normalColor);
}
});
$(document).mousemove(function (event) {
dragDiv(event);
});
/************************************ dragedTableData.js 结束 *******************************/
/************************************ dragedTableData.js 结束 *******************************/
</script>
</head>
<body>
<table id="tableId" width="70%" align="center" cellpadding="0" cellspacing="0">
<tr>
<th colspan="4" style="">
拖动交换单元格内容
</th>
</tr>
<tr>
<td>
Java
</td>
<td>
Java One
</td>
<td>
JBuilder
</td>
<td>
Stuts
</td>
</tr>
<tr>
<td>
C++
</td>
<td>
Visual Studio
</td>
<td>
Office
</td>
<td>
Windows
</td>
</tr>
<tr>
<td>
PhotoShop
</td>
<td>
Java
</td>
<td>
Illustrator
</td>
<td>
PageMaker
</td>
</tr>
<tr>
<td>
Cartoon
</td>
<td>
Telephone
</td>
<td>
China
</td>
<td>
USA
</td>
</tr>
<tr>
<td>
Java
</td>
<td>
Java One
</td>
<td>
JBuilder
</td>
<td>
Stuts
</td>
</tr>
<tr>
<td>
C++
</td>
<td>
Visual Studio
</td>
<td>
Office
</td>
<td>
Windows
</td>
</tr>
<tr>
<td>
PhotoShop
</td>
<td>
Flash
</td>
<td>
Illustrator
</td>
<td>
PageMaker
</td>
</tr>
<tr>
<td>
Cartoon
</td>
<td>
Telephone
</td>
<td>
China
</td>
<td>
USA
</td>
</tr>
</table>
</body>
</html>
