用原生JavaScript做一個拖拽效果

一個JavaScript自由拖拽類介紹
服務器君一共花費了65.285 ms進行了4次數據庫查詢,努力地為您提供了這個頁面。
試試閱讀模式?希望聽取您的建議

效果演示

拖拽狀態:x:0, y:0
Drag me.

基本拖拽:

new Dragdrop({
	target 拖拽元素 HTMLElemnt 必選
	bridge	 指定鼠標按下哪個元素時開始拖拽,實現模態對話框時用到 
	dragable 是否可拖拽	 (true)默認
	dragX true/false false水平方向不可拖拽 (true)默認
	dragY	 true/false false垂直方向不可拖拽 (true)默認
	area [minX,maxX,minY,maxY] 指定拖拽范圍 默認任意拖動
	callback 拖拽過程中的回調函數
});

拖拽最有技術含量的就是這段了:

			if(el.setCapture){ //IE
				E.on(el, "losecapture", mouseup);
				el.setCapture();
				e.cancelBubble = true;
			}else if(window.captureEvents){ //標準DOM
				e.stopPropagation();
				E.on(window, "blur", mouseup);
				e.preventDefault();
			}

這個效果沒有使用JQuery,純原生JavaScript實現,可以參考下。拖動效果平滑,自然,CPU性能沒有明顯起伏。

具體的拖拽了可以查看本頁源代碼獲得,這里就不貼出來了。

本文地址:http://www.snpmgr.live/librarys/veda/detail/1316,歡迎訪問原出處。

不打個分嗎?

轉載隨意,但請帶上本文地址:

http://www.snpmgr.live/librarys/veda/detail/1316

如果你認為這篇文章值得更多人閱讀,歡迎使用下面的分享功能。
小提示:您可以按快捷鍵 Ctrl + D,或點此 加入收藏

大家都在看

閱讀一百本計算機著作吧,少年

很多人覺得自己技術進步很慢,學習效率低,我覺得一個重要原因是看的書少了。多少是多呢?起碼得看3、4、5、6米吧。給個具體的數量,那就100本書吧。很多人知識結構不好而且不系統,因為在特定領域有一個足夠量的知識量+足夠良好的知識結構,系統化以后就足以應對大量未曾遇到過的問題。

奉勸自學者:構建特定領域的知識結構體系的路徑中再也沒有比學習該專業的專業課程更好的了。如果我的知識結構體系足以囊括面試官的大部分甚至吞并他的知識結構體系的話,讀到他言語中的一個詞我們就已經知道他要表達什么,我們可以讓他坐“上位”畢竟他是面試官,但是在知識結構體系以及心理上我們就居高臨下。

所以,閱讀一百本計算機著作吧,少年!

《UNIX編程藝術》 姜宏 (作者)

《UNIX編程藝術》主要介紹了Unix系統領域中的設計和開發哲學、思想文化體系、原則與經驗,由公認的Unix編程大師、開源運動領袖人物之一Eric S. Raymond傾力多年寫作而成。包括Unix設計者在內的多位領域專家也為本書貢獻了寶貴的內容。《UNIX編程藝術》內容涉及社群文化、軟件開發設計與實現,覆蓋面廣、內容深邃,完全展現了作者極其深厚的經驗積累和領域智慧。

更多計算機寶庫...

燃烧吧足球登陆