<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<a href="#" id="a1" style="position:relative;">aaaaaa</a>
<a href="#" id="a2" style="position:relative;">bbbbbb</a>
<SCRIPT LANGUAGE="JavaScript">
<!--
sPos = "";
gBeginMoving = false;
gDrop = false;
gSourceDiv = null;
gDestDiv = null;
fSetDragEvent(document.getElementById("a1"))
fSetDragEvent(document.getElementById("a2"))
function fSetDragEvent(obj){
obj.onmousedown = MouseDownToMove;
obj.onmousemove = MouseMoveToMove;
obj.onmouseup = MouseUpToMove;
obj.onmouseover = MouseOver;
function MouseDownToMove(){
if(event.srcElement.tagName == "INPUT"){
return;
}
obj.style.zIndex=1;
// ¼Çϵã»÷µÄλÖÃ
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
gBeginMoving=true;
obj.setCapture();
} function MouseMoveToMove(){
try{
if(!gBeginMoving) return false;
var top = event.clientY-obj.mouseDownY;
var left = event.clientX-obj.mouseDownX;
obj.style.top = top;
obj.style.left = left;
obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
}catch(exp){
fDebug("Drag[mouseover]",exp.description);
}
}
function MouseUpToMove(){
try{
if(!gBeginMoving) return false;
var top = event.clientY-obj.mouseDownY;
var left = event.clientX-obj.mouseDownX;
// ÅжÏÊÇ·ñÓû§µãÁËÁ´½ÓÀ´Òƶ¯
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
gBeginMoving=false;
gDrop = true;
gSourceDiv = obj;
obj.style.filter = "";
window.setTimeout("gDrop = false",50);
}catch(exp){
fDebug("Drag[mouseup]",exp.description);
}
}
function MouseOver(){
if(gDrop){
var el = event.srcElement;
if(el){
var o1 = document.createElement(el.outerHTML);
var o2 = document.createElement(gSourceDiv.outerHTML);
o1.innerHTML = el.innerHTML;
o2.innerHTML = gSourceDiv.innerHTML;
fSetDragEvent(o1);
fSetDragEvent(o2);
el.replaceNode(o2);
gSourceDiv.replaceNode(o1);
gDrop = false;
}
}
}
}
//-->
</SCRIPT>
</BODY>
</HTML>
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD><BODY>
<a href="#" id="a1" style="position:relative;">aaaaaa</a>
<a href="#" id="a2" style="position:relative;">bbbbbb</a>
<SCRIPT LANGUAGE="JavaScript">
<!--
sPos = "";
gBeginMoving = false;
gDrop = false;
gSourceDiv = null;
gDestDiv = null;
fSetDragEvent(document.getElementById("a1"))
fSetDragEvent(document.getElementById("a2"))
function fSetDragEvent(obj){
obj.onmousedown = MouseDownToMove;
obj.onmousemove = MouseMoveToMove;
obj.onmouseup = MouseUpToMove;
obj.onmouseover = MouseOver;
function MouseDownToMove(){
if(event.srcElement.tagName == "INPUT"){
return;
}
obj.style.zIndex=1;
// ¼Çϵã»÷µÄλÖÃ
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
gBeginMoving=true;
obj.setCapture();
} function MouseMoveToMove(){
try{
if(!gBeginMoving) return false;
var top = event.clientY-obj.mouseDownY;
var left = event.clientX-obj.mouseDownX;
obj.style.top = top;
obj.style.left = left;
obj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
}catch(exp){
fDebug("Drag[mouseover]",exp.description);
}
}
function MouseUpToMove(){
try{
if(!gBeginMoving) return false;
var top = event.clientY-obj.mouseDownY;
var left = event.clientX-obj.mouseDownX;
// ÅжÏÊÇ·ñÓû§µãÁËÁ´½ÓÀ´Òƶ¯
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
gBeginMoving=false;
gDrop = true;
gSourceDiv = obj;
obj.style.filter = "";
window.setTimeout("gDrop = false",50);
}catch(exp){
fDebug("Drag[mouseup]",exp.description);
}
}
function MouseOver(){
if(gDrop){
var el = event.srcElement;
if(el){
var o1 = document.createElement(el.outerHTML);
var o2 = document.createElement(gSourceDiv.outerHTML);
o1.innerHTML = el.innerHTML;
o2.innerHTML = gSourceDiv.innerHTML;
fSetDragEvent(o1);
fSetDragEvent(o2);
el.replaceNode(o2);
gSourceDiv.replaceNode(o1);
gDrop = false;
}
}
}
}
//-->
</SCRIPT>
</BODY>
</HTML>
解决方案 »
- JS输出中文乱码!?(模板里正常,生成静态页面就乱码!)
- 如何在XML文件的指定位置插入字符串 jsp
- 动态删除表格行的问题,请帮忙指导一下。谢谢!
- 菜鸟提问------
- 日期控件问题,100分请朋友帮忙解决一下
- ajax如何实现webmap?
- 如何使用javascript在excel单元格中设置超链接
- 请教一段校验:text中只能输入0~5的两位小数,比如3.54,大于5、小于0或者非数字字符都给出错误提示
- extjs4 gridpanel 动态tbar
- 二维的RADIO的连动选择,不知道怎么处理。。。。。求帮助,,谢谢l..术语方面可能有点问题,见谅。。一直搞不定,不知道有没难度,求解。
- 急~~如何把我在JAVASCRIPT里定义的一个数组保存到REQUEST中~~
- 随意拖拽一个模块调换位置,有请JK_10000
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<style>
.removableObj
{
height:25;position:relative;
}
</style>
<script language="javascript">
var beginMoving=false;
var sourceObj=null;
var objectObj=null;
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
sourceObj=obj;
objectObj=null;
}function MouseMoveToMove(obj){
if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
window.setTimeout("swapFun()",10);
}function MouseOverFun(obj)
{
objectObj=obj;
}function swapFun()
{
if(sourceObj!=null && objectObj!=null )
sourceObj.swapNode(objectObj);
sourceObj=null;
objectObj=null;
}
</script>
</head><body>
用鼠标移动TD(本代码也适合用鼠标进行其它对象的对换(如table,div等))
<table border="1" width="300">
<tr>
<td bgcolor=red class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >a1</td>
<td bgcolor=blue class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >a2</td>
</tr>
<tr>
<td bgcolor=#cccccc class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >b1</td>
<td bgcolor=#eeeeee class="removableObj" onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);' onmouseover="MouseOverFun(this);" >b2</td>
</tr>
</table></body></html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JK:支持民族工业,尽量少买X货</title>
<script language="javascript">
var beginMoving=false;
function MouseDownToMove(obj){
obj.style.zIndex=1;
obj.mouseDownY=event.clientY;
obj.mouseDownX=event.clientX;
beginMoving=true;
obj.setCapture();
}function MouseMoveToMove(obj){
if(!beginMoving) return false;
obj.style.top = (event.clientY-obj.mouseDownY);
obj.style.left = (event.clientX-obj.mouseDownX);
}
function MouseUpToMove(obj){
if(!beginMoving) return false;
obj.releaseCapture();
obj.style.top=0;
obj.style.left=0;
obj.style.zIndex=0;
beginMoving=false;
var tempTop=event.clientY-obj.mouseDownY;
var tempRowIndex=(tempTop-tempTop%25)/25;
if(tempRowIndex+obj.rowIndex <0 )tempRowIndex=-1;
else tempRowIndex=tempRowIndex+obj.rowIndex;
if(tempRowIndex >= obj.parentElement.rows.length-1) tempRowIndex = obj.parentElement.rows.length-1;
obj.parentElement.moveRow(obj.rowIndex,tempRowIndex);
}</script>
</head>
<body >
用鼠标移动TR<br>
<TABLE WIDTH="300" BORDER="1" >
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=blue>0</TD><TD>0</TD><TD>0</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=black>1</TD><TD>1</TD><TD>1</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD bgcolor=red>2</TD><TD>2</TD><TD>2</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>3</TD><TD>3</TD><TD>3</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>4</TD><TD>4</TD><TD>4</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>5</TD><TD>5</TD><TD>5</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>6</TD><TD>6</TD><TD>6</TD></TR>
<TR bgcolor=#ffffff style='height:25;position:relative;' onmousedown='MouseDownToMove(this)' onmousemove='MouseMoveToMove(this)' onmouseup='MouseUpToMove(this);'><TD>7</TD><TD>7</TD><TD>7</TD></TR> </script>
</TABLE> </body>
</html>
虽然在firefox里不能够实现
但是这也够酷