手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >DIV任意拖动的问题
DIV任意拖动的问题
摘要:DRAGtheDIV*{font-size:12px}.dragTable{font-size:12px;border-top:1pxsol...

DRAG the DIV*{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;}/****JoeLee************E-MAIL:hktx@163.com****QQ:48293707*****11:09 2006-2-9******/ var draged=false; tdiv=null;function dragStart(){ ao=event.srcElement; if((ao.tagName=="TD")||(ao.tagName=="TR"))ao=ao.offsetParent; else return; draged=true; tdiv=document.createElement("div"); tdiv.innerHTML=ao.outerHTML; tdiv.style.display="block"; tdiv.style.position="absolute"; tdiv.style.filter="alpha(opacity=70)"; tdiv.style.cursor="move"; tdiv.style.width=ao.offsetWidth; tdiv.style.height=ao.offsetHeight; tdiv.style.top=getInfo(ao).top; tdiv.style.left=getInfo(ao).left; document.body.appendChild(tdiv); lastX=event.clientX; lastY=event.clientY; lastLeft=tdiv.style.left; lastTop=tdiv.style.top; try{ ao.dragDrop(); }catch(e){}}function draging(){//重要:判断MOUSE的位置 if(!draged)return; var tX=event.clientX; var tY=event.clientY; tdiv.style.left=parseInt(lastLeft)+tX-lastX; tdiv.style.top=parseInt(lastTop)+tY-lastY; for(var i=0;i=parentCell.left&&tX=parentCell.top&&tY=parentCell.left&&tX=parentCell.top&&tY yPos)){ beforeNode = activeCont.childNodes[i]; } } }

// the item being dragged belongs before another item if(beforeNode){ if(beforeNode!=curTarget.nextSibling){ writeHistory(curTarget, 'Inserted Before '+beforeNode.id); activeCont.insertBefore(curTarget, beforeNode); }

// the item being dragged belongs at the end of the current container } else { if((curTarget.nextSibling) || (curTarget.parentNode!=activeCont)){ writeHistory(curTarget, 'Inserted at end of '+activeCont.id); activeCont.appendChild(curTarget); } }

// the timeout is here because the container doesn't "immediately" resize setTimeout(function(){ var contPos = getPosition(activeCont); activeCont.setAttribute('startWidth', parseInt(activeCont.offsetWidth)); activeCont.setAttribute('startHeight', parseInt(activeCont.offsetHeight)); activeCont.setAttribute('startLeft', contPos.x); activeCont.setAttribute('startTop', contPos.y);}, 5); // make our drag item visible if(curTarget.style.display!=''){ writeHistory(curTarget, 'Made Visible'); curTarget.style.display = ''; curTarget.style.visibility = 'visible'; } } else {

// our drag item is not in a container, so hide it. if(curTarget.style.display!='none'){ writeHistory(curTarget, 'Hidden'); curTarget.style.display = 'none'; } } }

// track the current mouse state so we can compare against it next time lMouseState = iMouseDown;

// mouseMove target lastTarget = target; } if(Demos[2]){ document.getElementById('MouseXPosition').value = mousePos.x; document.getElementById('MouseYPosition').value = mousePos.y; }

if(dragObject){ dragObject.style.position = 'absolute'; dragObject.style.top = mousePos.y - mouseOffset.y; dragObject.style.left = mousePos.x - mouseOffset.x; }

// track the current mouse state so we can compare against it next time lMouseState = iMouseDown;

// this prevents items on the page from being highlighted while dragging if(curTarget || dragObject) return false;}

function mouseUp(ev){

if(Demos[0] || Demos[4]){ if(curTarget){ writeHistory(curTarget, 'Mouse Up Fired');

dragHelper.style.display = 'none'; if(curTarget.style.display == 'none'){ if(rootSibling){ rootParent.insertBefore(curTarget, rootSibling); } else { rootParent.appendChild(curTarget); } } curTarget.style.display = ''; curTarget.style.visibility = 'visible'; curTarget.style.cssText = 'FILTER:alpha(opacity=100);border:1px solid #000'; } curTarget = null; } if(Demos[6] && dragObject){ ev = ev || window.event; var mousePos = mouseCoords(ev);

var dT = dragObject.getAttribute('droptarget'); if(dT){ var targObj = document.getElementById(dT); var objPos = getPosition(targObj); if((mousePos.x > objPos.x) && (mousePos.y > objPos.y) && (mousePos.x

【DIV任意拖动的问题】相关文章:

一段实时更新的时间代码

谈一谈javascript闭包

javascript实现行拖动的方法

jquery任意位置浮动固定层插件用法实例

js+HTML5实现canvas多种颜色渐变效果的方法

下拉菜单的简易制作

JavaScript代码因逗号不规范导致IE不兼容的问题

制作特殊字的脚本

多个iframe自动调整大小的问题

使用Node.js处理前端代码文件的编码问题

精品推荐
分类导航