使用JS实现拖动

下午研究了一下用JavaScript实现拖动效果，找来网上的代码分析了一下然后照抄了个最简单的，将慢慢将它完善

现状：目前还不支持FireFox

不支持项（已知项）：pixelLeft、pixelTop、alpha(opacity=90)

PS：不知道为什么贴代码贴不全   管理员通知这个是Rich Editor的Bug，需要改用BBCode

<!---->



<meta content="EditPlus" name="Generator">
<meta content="" name="Author">
<meta content="" name="Keywords">
<meta content="" name="Description">
<style type="text/css">
*{font-size:12px}
.dragTable{
font-size:12px;
border-top:1px solid #3366cc;
margin-bottom: 10px;
width:100%;
background-color:#FFFFFF;
}
.dragTR{
cursor:move;
color:#7787cc;
background-color:#e5eef9;
}
td{vertical-align:top;}
#parentTable{
border-collapse:collapse;
letter-spacing:25px;
}
</style>
<script language="JavaScript" type="text/javascript">
/** 目标面板 */
var tarElement=null;
/** 实际被拖动面板 */
var dragElement=null;
/** 定义元素位置 */
var downX,downY,tmp_o_x,tmp_o_y;

var refElement=null;
var dragActive=0;
/** 是否在移动中 1为是 */
var draging=0;

function getEventElement (event){
 if(event == null){
  event = window.event;
 }
 return (event.srcElement ? event.srcElement : event.target);
}

/**
 * onMouseDown触发事件
 */
 function readyDrag(event) {
 dragActive = 1;

 var eventObj = getEventElement(event);
 // 非DIV元素不能被拖动
 if(eventObj.tagName != "DIV") return;

 // 将目标元素附给dragElement
 dragElement = eventObj.parentNode;
 // 复制一个tmpElement到目标面板
 tarElement = dragElement.cloneNode(true);
 // TODO alpha(opacity=50)仅被IE支持
 tarElement.style.filter="alpha(opacity=50)"
 tarElement.style.zIndex=2;
 dragElement.style.zIndxe=1;
 tarElement.style.position="absolute";

 if(dragElement.parentNode.tagName != "BODY"){
  // 当选中可拖动元素时,初始化拖动元素的初始位置
  // TODO pixelLeft仅被IE支持
  dragElement.style.left = dragElement.offsetLeft + dragElement.parentNode.style.pixelLeft;
  dragElement.style.top = dragElement.offsetTop + dragElement.parentNode.style.pixelTop;
 }

 //取得当前鼠标的绝对位置
 downX=event.clientX;
 downY=event.clientY;
 //取得拖动元素当前的绝对位置
 tmp_o_x=dragElement.style.pixelLeft;
 tmp_o_y=dragElement.style.pixelTop;
 tarElement.style.visibility="hidden";

 document.body.appendChild(tarElement);
 document.onmousemove=startDrag;
 }

document.onmouseup=endDrag;

/**
 * onMouseOver事件触发
 */
function startDrag(){
 if(dragActive==1&&event.button==1&&dragElement!=null&&tarElement!=null){
  //当拖动动作进行、mouse button pressed、拖动物件存在、目标面板存在的情况下
  tarElement.style.visibility="visible";
  tarElement.style.left=tmp_o_x+event.clientX-downX;
  tarElement.style.top=tmp_o_y+event.clientY-downY;
  dragElement.style.backgroundColor="#CCCCCC";
  //游标样式
  document.body.style.cursor="move";
  draging=1;
 }
}

/**
 * onMouseUp时间触发
 */
function endDrag(){
 if(dragActive==1&&tarElement!=null){
  //当拖动动作进行、目标面板存在的情况下
  if(draging==1){
   // 如果面板处于移动状态中，将原有面板移除
   dragElement.removeNode(true);
   draging=0;
  }

  tarElement.style.filter="alpha(opacity=100)";
  tarElement.style.zIndex=1;
  document.body.style.cursor="default";
 }

 dragElement=null;
 tarElement=null;
 dragActive=0;
}
</script>

 

 

  Window
 

 

Content