用javascript做拖動布局的思路

2021-09-06 01:37:31 字數 1939 閱讀 3997

這幾天不是很忙,就找了些拖動布局方面的資料看看,也學著寫了個拖動布局的效果,沒想到花了好多時間,

七拼八湊,總算是把這個效果寫出來了。哎!還是js的功夫太差。因為是邊找資料邊寫的,很多地方印象不深,

時間一長,再重新寫估計也難,所以把當時的思路記錄一下!也希望大蝦指點一下!

好了,轉入正文,在開始之前先介紹幾個功能函式!

1.格式化事件的函式

程式**

function getevent() }

func=func.caller; }

return null; }

2.取得滑鼠的位置

程式**

function mousecoords(ev); }

return ; }

3.得到元素的位置

程式**

function getposition(ele)

left += ele.offsetleft;

top += ele.offsettop;

return ; }

首先,當然是寫好初始布局的頁面

一般拖動的元素是跟隨滑鼠的,我的思路是在把拖動的元素增加到乙個position為absolute的div中,

滑鼠拖動的時候就讓它的位置根據滑鼠的座標變化就可以了。所以在頁面增加了個onload

程式**

var tmpdiv=null;//臨時存放拖動物件的div

window.οnlοad=function()

要實現拖動,首先觸發的事件是mousedown,所以我在拖動的table的乙個td上繫結了οnmοusedοwn="mousedown(this);"

程式**

var dragobject = null;//拖動的元素(table)

var mouseoffset = null;//滑鼠的在拖動元素中的位置

var dragdiv=null;//拖動的table所在的列的div

var eledivw=null;//拖動的table的父節點(div)的高度

var dragdivlen=null;//拖動的table所在的列的div中用來放置table的div的個數

var dragcontainer=["col1","col2","col3"];//用來實現列布局的div的id

//滑鼠按下拖動的元素

function mousedown(elem)

//得到滑鼠在拖動元素中的位置

function getmouseoffset(target, ev); }

剩下的當然就是滑鼠移動拖動物件也能移動,用到的當然就是mousemove咯,為簡單我在document上繫結,

程式**

document.onmousemove = mousemove;

function mousemove()

return false; }

有了mousemove當然少不了mouseup

程式**

document.onmouseup = mouseup;

//滑鼠鬆開

function mouseup() }

dragobject=null; }

}看看是不是可以拖動了,當你鬆開滑鼠左鍵時,拖動的元素將回到原來的位置

最後要做的就是讓拖動元素不回到原來的位置,而是回到我們拖動的位置。

下面是mousemove事件的所有**,看看注釋就明白了

程式**

function mousemove() }

}//判斷tmpdiv在此列哪個區塊範圍內

if(activecontainer) }

}//若此區塊存在,就在此區塊前插入拖動元素

if(befornode!=null) }

//不存在就在所在列插入拖動元素

else }

return false; }

好了,乙個可以拖動布局的頁面就完成了

javascript 滑鼠拖動

因為滑鼠沒有拖動事件 按下滑鼠並移動 只有按下,抬起,移動。記得在之前的乙個 拖動層 的隨筆中,我實現拖動,是用的乙個布林變數,判斷是否可以拖動某元素。這兩天看了一些東西,發現不需要設這個布林變數 實現過程 按下滑鼠的時候,給文件物件 當然也可以是別的dom物件 的移動事件繫結乙個處理函式,同時也給...

JavaScript滑鼠拖動

下面先看乙個有bug的版本,就是滑鼠移動太快後方塊會跟不上滑鼠的移動,然後滑鼠就離開了方塊區域,而事件都是繫結在方塊 div 上的,所以當滑鼠離開方塊後方塊就停了下來,當滑鼠 無論是否鬆開滑鼠左鍵 回到方塊區域方塊又會跟著滑鼠移動。出現這種問題的原因是 系統監聽滑鼠移動的頻次小於滑鼠移動的頻次。解決...

Javascript事件物件 滑鼠拖動例項

window.event 屬性 1.srcelement 獲取事件源 2.keycode 獲取鍵盤資訊 3.clientx,clienty,滑鼠相對於視窗左上角的座標 4.screenx,screeny 滑鼠相對於螢幕左上角的座標 5.returnvalue 事件返回值 6.cancelbubble...