|
好了，转入正文，在开始之前先介绍几个功能函数！ <br>1.格式化事件的函数 <br><div class="codetitle"><span><a class="copybut" data="55295" id="copybut55295"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code55295"><br>function getEvent(){ <br> //同时兼容ie和ff的写法 <br> if(document.all) return window.event; <br> func=getEvent.caller; <br> while(func!=null){ <br> var arg0=func.arguments[0]; <br> if(arg0){ <br> if((arg0.constructor==Event || arg0.constructor ==MouseEvent) <br> || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation)){ <br> return arg0; <br> } <br> } <br> func=func.caller; <br> } <br> return null; <br>} <br></div><br><br><strong>2.取得鼠标的位置</strong> <br><br><div class="codetitle"><span><a class="copybut" data="47010" id="copybut47010"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code47010"><br><br>function mouseCoords(ev){ <br> if(ev.pageX || ev.pageY){ <br> return {x:ev.pageX, y:ev.pageY}; <br> } <br> return { <br> x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, <br> y:ev.clientY + document.body.scrollTop - document.body.clientTop <br> }; <br>} <br></div><br><br><strong>3.得到元素的位置 <br></strong><br> <div class="codetitle"><span><a class="copybut" data="24983" id="copybut24983"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code24983"><br>function getPosition(ele){ <br> var left = 0; <br> var top = 0; <br> while (ele.offsetParent){ <br> left += ele.offsetLeft; <br> top += ele.offsetTop; <br> ele = ele.offsetParent; <br> } <br> left += ele.offsetLeft; <br> top += ele.offsetTop; <br> return {x:left, y:top}; <br>} <br></div><br>首先，当然是写好初始布局的页面， 查看初始页面效果 <br><br>一般拖动的元素是跟随鼠标的，我的思路是在把拖动的元素增加到一个position为absolute的div中， <br>鼠标拖动的时候就让它的位置根据鼠标的坐标变化就可以了。所以在页面增加了个onload <br><br><div class="codetitle"><span><a class="copybut" data="64504" id="copybut64504"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code64504"><br>var tmpDiv=null;//临时存放拖动对象的div <br>window.onload=function(){ <br> tmpDiv=document.createElement("div"); <br> tmpDiv.style.cssText = 'position:absolute;display:none;border:1px dotted #FFCC66;'; <br> document.body.appendChild(tmpDiv); <br>} <br></div><br><br>要实现拖动，首先触发的事件是mouseDown,所以我在拖动的table的一个td上绑定了onmousedown="mouseDown(this);" <br><br> 程序代码 <br><br><div class="codetitle"><span><a class="copybut" data="45941" id="copybut45941"><u>复制代码</u></a></span> 代码如下:</div><div class="codebody" id="code45941"><br>var dragObject = null;//拖动的元素(table) <br>var mouseOffset = null;//鼠标的在拖动元素中的位置 <br>var dragDiv=null;//拖动的table所在的列的div <br>var eleDivW=null;//拖动的table的父节点(div)的高度 <br>var dragDivLen=null;//拖动的table所在的列的div中用来放置table的div的个数 <br>var DragContainer=["col1","col2","col3"];//用来实现列布局的div的id <br>//鼠标按下拖动的元素 <br>function mouseDown(elem){ <br> ev=getEvent(); <br> dragObject = elem.p |
|
转播
