jquery外掛程式 自由拖拽

最近工作不是很忙，學習之餘想整理一些**出來，首先想到的就是是js拖拽。 兩年前去某公司面試的時候，曾經被問過這個問題，如何在頁面上拖放元素，儘管現在看起來很簡單，但當時的我半點思路都沒有，面試想當然失敗了。 這兩天趁空閒整理出乙個自由拖拽的jquery外掛程式：jquery.jsdrag.js。

js拖拽主要用到了滑鼠三個事件：mousedown、mousemove、mouseup。

mousedown：滑鼠按下

mouseup：滑鼠鬆開

mousemove：滑鼠移動

mousedown和click的區別：滑鼠點選的整個過程會發生 mousedown→mouseup→click三個事件， click在最後滑鼠鬆開之後才會發生。

htm框架：

，.drager素是我們點選拖拽的元素，.jsdrag為拖拽元素可移動的空間。

呼叫方式：$(".jsdrag").drag(setting)  目前提供三種方式，自由拖拽，橫向拖拽，縱向拖拽，省略引數的情況下為自由拖拽

現在只接收乙個屬性

type:free|horizontal|vertical   

外掛程式原始碼：

js

(function

($);
var config =;
config =$.extend(config, setting);
this.each(function
(); 
var pos ={};
var flag = false
; 
$drag.mousedown(
function
(evt));
$(document).mousemove(
function
(evt);
switch
(config.type) 
$drag.css(cssparam);
coor.cx =evt.clientx;
coor.cy =evt.clienty;
}}).mouseup(
function
(evt)); 
});return
this
; }
});})(jquery);

css

.jsdrag .drager

需要注意的是，不要給.jsdrag 設定padding等樣式， 有需要的話可以把樣式設定到.jsdrag父元素上

JQuery 拖拽以及相關外掛程式

所有效果說明 基本的滑鼠互動 拖拽 drag and dropping 排序 sorting 選擇 selecting 縮放 resizing 各種互動效果 手風琴式的摺疊選單 accordions 日曆 date pickers 對話方塊 dialogs 滑動條 sliders 排序 table ...

WPF 自由拖拽控制項

為了演示，布局檔案很簡單，只是放了我乙個自己做的自定義虛擬鍵盤控制項，也可以放其他各種控制項，例如button name keyb horizontalalignment left height 196 margin 68,75,0,0 verticalalignment top width 588...

Jquery彈出層外掛程式和拖拽外掛程式的結合使用範例

因為工作需要開發了乙個拖拽外掛程式,於是乎順手寫個彈出層吧 另外把拖拽外掛程式也呼叫進來讓他能控制拖動.通過動畫你會發現其實這個層剛開始是不能拖動的,只有點選了 canmove 才能拖動,當然了這只是乙個高階應用例項,實際應用中我們可以讓他不需要點選就可以拖拽.另外這個層有乙個 函式.自己研究 吧,...