jquery div 交换

最新推荐文章于 2020-12-21 01:42:12 发布

weixin_30732825

最新推荐文章于 2020-12-21 01:42:12 发布

阅读量78

点赞数

文章标签： java photoshop ui

原文链接：http://www.cnblogs.com/xuyuchen/p/8282986.html

版权

<html>

<head>

<style>

body

{

-moz-user-select: none;

}

{

width: 20%;

height: 20px;

border-bottom: 1px solid black;

border-right: 1px solid black;

cursor: default;

}

div

{

font-size: 13px;

}

{

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>

$(document).ready(function () {

$(document).bind("contextmenu", function (e) { return false; });

$(document).bind("selectstart", function () { return false; });

DragedTable();

});

/************************************ 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 结束 *******************************/

</script>

</head>

<body>

<tr>

拖动交换单元格内容

</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>

转载于:https://www.cnblogs.com/xuyuchen/p/8282986.html

weixin_30732825

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫