jquery外掛-自由拖拽
最近工作不是很忙,學習之餘想整理一些程式碼出來,首先想到的就是是js拖拽。 兩年前去某公司面試的時候,曾經被問過這個問題,如何在頁面上拖放元素,儘管現在看起來很簡單,但當時的我半點思路都沒有,面試想當然失敗了。 這兩天趁空閒整理出一個自由拖拽的jquery外掛:jquery.jsDrag.js。
js拖拽主要用到了滑鼠三個事件:mousedown、mousemove、mouseup。
mousedown:滑鼠按下
mouseup:滑鼠鬆開
mousemove:滑鼠移動
mousedown和click的區別:滑鼠點選的整個過程會發生 mousedown→mouseup→click三個事件, click在最後滑鼠鬆開之後才會發生。
htm框架:<div class="jsDrag" ><div class="drager"></div></div>,.drager素是我們點選拖拽的元素,.jsDrag為拖拽元素可移動的空間。
呼叫方式:$(".jsDrag").drag(setting) 目前提供三種方式,自由拖拽,橫向拖拽,縱向拖拽,省略引數的情況下為自由拖拽
現在只接收一個屬性
type:free|horizontal|vertical
外掛原始碼:
JS
(function($){ $.fn.extend({ drag:View Codefunction(setting){ var settting = setting || {}; var config = { type: "free" }; config = $.extend(config, setting); this.each(function(){ var $panel = $(this) ; var $drag = $panel.find(".drager");var coor = {}; var pos = {}; var flag = false; $drag.mousedown(function(evt){ coor.cX = evt.clientX; coor.cY = evt.clientY; pos.left = parseInt($drag.css("left")); pos.top = parseInt($drag.css("top")); flag = true; }); $(document).mousemove(function(evt){ if (flag) { var maxWidth = $panel.width() - $drag.width(); var maxHeight = $panel.height() - $drag.height(); var nowLeft = (pos.left+(evt.clientX-coor.cX)); var nowTop = (pos.top+(evt.clientY-coor.cY)); pos.left = nowLeft <= 0 ? 0 : (nowLeft > maxWidth ? maxWidth : nowLeft); pos.top = nowTop <= 0 ? 0 : (nowTop > maxHeight ? maxHeight : nowTop); var cssParam = {"left": pos.left, "top":pos.top}; switch (config.type) { case "free" : break; case "horizontal" : delete cssParam["top"]; break; case "vertical" : delete cssParam["left"]; break; } $drag.css(cssParam); coor.cX = evt.clientX; coor.cY = evt.clientY; } }).mouseup(function(evt){ flag = false; }); }); return this; } }); })(jQuery);
CSS
.jsDrag { position:relative; width:800px; height:50px; margin:0 auto; background:#FF0; border:1px solid #ccc; } .drager { background:#000; width:10px; height:10px; position:absolute; top:0; left:0; cursor:pointer; }View Code
需要注意的是,不要給.jsDrag 設定padding等樣式, 有需要的話可以把樣式設定到.jsDrag父元素上
相關推薦
jquery外掛-自由拖拽
最近工作不是很忙,學習之餘想整理一些程式碼出來,首先想到的就是是js拖拽。 兩年前去某公司面試的時候,曾經被問過這個問題,如何在頁面上拖放元素,儘管現在看起來很簡單,但當時的我半點思路都沒有,面試想當然失敗了。 這兩天趁空閒整理出一個自由拖拽的jquery外掛:jquery.jsDrag.js。 js拖拽主
使用jquery.easydrag拖拽外掛的拖拽出界問題
在Iframe框架裡使用了jquery.easydrag.handler.beta2.js外掛,用來拖動DIV塊。 JS程式碼如下: <script type="text/javascript" src="js/jquery.js"></script&
Jquery 多行拖拽圖片排序 jq優化
round pan lock ech att orm width app init <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQu
jQuery內容橫向拖拽滾動
color 鼠標拖動 doc 返回 false idt 多說 hit brush 如果有業務需求:使用橫向滾動,而又不想用滾動條,可以使用橫向拖拽滾動,主要是利用元素的scrollLeft特性; 廢話不多說直接上代碼; css: .box{ width:1
vue元件拖拽-矩形自由拖拽
最近公司有個需求,需要實現元件拖拽,實現方式:主要通過vue元件實現,通過在網上查詢資料,發現沒有真正符合需求的例子,但是有一些功能可以參考,無奈之下打算自己封裝一個,一方面也想證明一下自己的能力,此篇博文只是記錄一下,方便以後遇到此類問題,有個參考。 經過一段
jQuery ui實現拖拽檔案到資料夾案例
js:/*拖動事件開始*/ var $gallery = $(".drop-move"), //拖動物件 $trash = $(".move-in"); //接收容器 $("dd",$gal
前端外掛之拖拽
1.拖拽的外掛很多,其實我們只要明白他的原理,就不難了: 之所以形成拖拽的效果,是在滑鼠按下onmousedown的時候記錄滑鼠座標與被拖拽div左邊界,上邊界的距離disX,disY,在拖動onmousemove的時候,講拖動時滑鼠的x座標oEv.clientX-disX
簡單封裝一個上傳外掛——支援拖拽和預覽
最近碰到一個需求。需要上傳很多圖片,但是又不是批量上傳。場景是這樣的。我需要從資料表中查出一行一行的資料,每一行都需要更新一個對應的圖片。天才需求方不喜歡批量上傳,因為需要讓他們給每個圖片命名。 原生input flie上傳能滿足對方需求,但是不能方便拖拽和預
jquery實現div拖拽
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div拖拽</title> <sc
解決谷歌瀏覽器擴充套件程式中無法安裝vue-devtools外掛 或者拖拽安裝後報錯的情況
2.解壓vue-devtools-master 並雙擊開啟 進入資料夾 3.在該資料夾下執行cmd,若是cmd進入的地址不是資料夾所在地址cd 進入解壓的vue-devtools-master 所在的路徑即可,例如我這裡進入是c:\Users\shilei所以要 cd De
dragula外掛實現拖拽
拖拽 拖拽加效果 排序 拖拽 dragulaDecorator = componentBackingInstance => { if (componentBackingInstance)
div/dom元素拖拽縮放外掛,純js實現拖拽縮放,不依賴jQuery~
產品需求,需要用到對div(dom)進行拖拽縮放操作,看到有好多外掛,要麼依賴jQuery,要麼檔案太大。 封裝了一個外掛,不壓縮狀態下5KB。 html <!DOCTYPE html> <html lang="en"> <head> <
自定義Jquery拖拽外掛
新增節點,修改樣式 $("body").append("<div>123</div>"); $("body div").attr("id","box") $("body div").css({"background":"red","width"
自建JQuery拖拽外掛
最近由於業務需要,要有拖拽將頁面上控制元件進行一個排序的調整,網上找的控制元件大多不能完美達到預期效果,就自己做了一個小外掛,也記錄一下,畢竟是第一次寫js外掛 外掛程式碼: /** * Created by linxz on 2018/1/8. */ ;(functi
JQuery拖拽外掛使用及下載
16/07/08 UPDATE: A new beta version is now available with some bug corrections. Thanks to Randy for the useful feedback! 29/06/08 UPD
jquery實現對div的拖拽功能
func function .org absolut 移動 posit center sed fun <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o
js 利用jquery.gridly.js實現拖拽並且排序
user push idl osi llb ext true js實現 idt <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &
jQuery實現div橫向拖拽排序
src AR img blog set 排序 局部變量 -a 圖片 參考:https://blog.csdn.net/kongjiea/article/details/45578033 效果圖: html <h1>div橫向拖拽排序</h1>
draggabilly一款功能強大的拖動拖拽元素外掛
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
CSDN-----jquery拖拽圖片
JQuery實現拖拽DIV 之前實現的是以純javascript進行圖片拖拽,昨天發現做特效用jquery程式碼量減少了一倍多,實現拖拽的技術難點主要是在拖動結束點的控制,在放棄選擇拖拽目標時要準確的將事件清除掉,否則就會出現滑鼠明明放棄拖拽,目標卻還在移動,學習的小夥伴們最好了解清楚bin