用原生JavaScript做一個拖拽效果

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

效果演示

拖拽狀態: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本書吧。很多人知識結構不好而且不系統,因為在特定領域有一個足夠量的知識量+足夠良好的知識結構,系統化以后就足以應對大量未曾遇到過的問題。

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

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

《C程序設計語言(第2版新版)》 克尼漢 (作者), 等 (作者, 譯者), 徐寶文 (譯者)

《C程序設計語言》(第2版新版)是由C語言的設計者Brian W.Kernighan和Dennis M.Ritchie編寫的一部介紹標準C語言及其程序設計方法的權威性經典著作。全面、系統地講述了C語言的各個特性及程序設計的基本方法,包括基本概念,類型和表達式、控制流、函數與程序結構、指針與數組、結構、輸入與輸出、UNIX系統接口、標準庫等內容。

更多計算機寶庫...

燃烧吧足球登陆 足彩比分玩法规则 快赢481什么时候开始的 北京麻将胡法大全 幸运3D色谱走势图 股票融资费率 拉萨站街女大全 吉祥棋牌馆苹果手机版下载 微乐吉林麻将官方版 四川快乐十二遗漏汇总 福彩七乐彩开奖结果 叶小姐贵阳按摩q 福彩幸运农场开奖记录 黑桃棋牌app官网下载 大庆52麻将官网 中国云南11选5走势图 500万即时比分手机