如果我們需要做一個許願牆之類的web頁面，上面的照片可以隨便的拖動是不是很酷？小編帶你快速實現這種炫酷的html頁面效果
今天小編就給大家帶來一款jquery UI插件，可以方便的實現這種照片隨便拖拽的效果，先看一下html頁面效果：
html頁面效果
實現思路是紀錄鼠標移動的位置，然後將DIV移動到相對應的位置。搖擺效果的實現主要的原理是利用CSS3的transitions 和 transforms來實現的。
使用的時候在html頁面中引入jquery和jquery-ui.min.js以及jquery.ui.swingdrag.min.js文件。
jquery UI 插件部分註釋
今天的jquery插件就給大家講解到這裡，想要獲取這份源碼的可以點擊小編的頭像進入主頁，猛戳最下面的『源碼資料』即可獲得所有的源碼鏈接。
圖片拖拽學會了嗎？ (單選)
0人
0%
學會了
0人
0%
不會
0人
0%
想要源碼的，在文章末尾找方法
相關推薦
'教你們一些小技巧——插件使用技巧（一）'
"風靈的訴苦風靈發現自己真的太心軟了(ಥ﹏ಥ)，很多朋友使用插件會有各種各樣的問題，或者一些插件不知道怎麼使用，所以風靈決定再開一坑！（坑太多好難填o(╥﹏╥)o）好好聊聊怎麼用自定義的插件，一個插件的設定往往影響了你的整體遊戲體驗，尤其是那些使用最頻繁的插件，用熟練了是事...
鼠標
2019-09-17
'讓懷舊服更加親和——補充插件（一）'
"引導語之前風靈為了方便大家，尤其是新手玩家，專門發了一個基礎插件介紹的文章，因為只介紹了基礎插件，所以對於一些高端玩家可能不是很適用，為了滿足更多玩家的需求，我挑選了之前文章評論區的一些推薦和需求度高的插件進行了網上的檢索，這裡進行一個補充。如果各位使用反響不錯，煩請給風...
'懷舊服必備插件推薦---戀空魔獸完整版'
"前言魔獸世界懷舊服已開啟一段時間，很多小夥伴都玩的不亦樂乎，有關插件的討論也越來越多。戀空將會給你們帶來一系列懷舊服單體插件，讓你的懷舊服變得友好一些。玩家可以根據自己的需求，定製化的選用自己需要的功能插件。插件包的獲取指令在末尾。以下插件都已安裝測試，個別需要調整設置的...
'久等了！獵人射擊條！DOT！——懷舊服職業插件推薦（二）'
"說在前面的話首先向各位道個歉，因為之前說要儘快找到適合各個職業的插件，一直拖到現在，其實之前就已經找到一些職業插件，不過一直想著方便大多數的玩家，所以就放在那裡沒有做。今天想了一下，還是決定先把找到的職業插件放出來，各位還是按需選擇哦。就不多廢話了，直接開講獵人射擊條（Y...
'Shopify店鋪插件推薦：Product Questions and Answers'
"這款插件可以幫助賣家在產品頁面上創建產品特定的常見問題部分。具體功能包括：1、產品頁面的自動SEO當賣家回答新問題時，問題和答案將在產品頁面HTML上發佈。這改善了產品頁面的SEO2、未來客戶的常見問題解答過去訪問者及其答案提出的問題可幫助未來的客戶成為未來訪問者的常見問...
HTML
2019-08-31
'PS初學者不能不知道的16個基本操作（附PS自學視頻教程+插件）'
"Photoshop初學者應該知道的16個基本功能（附PS自學視頻教程+插件)有需要的同學，見文末領取一、加載圖像：打開點擊"文件"--"打開"--選擇我們要打開的文件"馬爾代夫.jpg"或者按下快捷鍵Ctrl + O啟動，或者直接將文件退拽到PS文件中來。二、調整圖像尺寸...
'無需科學上網安裝Chrome中的插件'
"寫在前邊最近無意中看到一篇文章非常的實用，如何在不能翻牆的情況下給Chrome安裝插件。這個問題已經困擾我好久了，之前安裝markdown時還是向朋友借的翻牆賬號。如果你也有這樣的困惑，恭喜你又可以掌握一種技能了。以後不會為在Chrome中安裝插件煩惱了。在Chrome中...
'這個只有2MB大小的插件，讓你告別快捷鍵'
"如何讓一臺普通的電腦脫離鼠標和鍵盤的束縛？相信是很多差友們經常會幻想的一個話題，硅谷的一家公司 leap motion 已經把差友們的幻想變成了現實。他們開發了一款傳感器，能夠跟蹤差友們手部運動的軌跡，然後讓大家隔空對著電腦屏幕就能進行一些騷操作。只要搭配一個小小的傳感器...
'快準備起床了上號了，趕緊下插件啊，頭號玩家核心通用插件分享'
"今天凌晨，先是官方直衝季卡大優惠活動，本來想玩一個月看看再說的，一不小心~~~真香,附上攻略魔獸世界懷舊服大酬賓，27日凌晨購買季卡，摺合月卡只要55元魔獸季卡直衝迫不及待的來到貓區建個法師先，熱乎乎剛出爐，果然沒人要這個名字。剛出爐的頭號法神相信大家已經知道正式懷舊服上...
推薦中...