這幾天不是很忙,就找了些拖動布局方面的資料看看,也學著寫了個拖動布局的效果,沒想到花了好多時間,
七拼八湊,總算是把這個效果寫出來了。哎!還是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...