說實話，jquery比原生的js好用多了，本來想用原生寫的，也寫出來的，僅僅是，感覺不像外掛程式，所以用jquery實現了一版。
實現的功能：能夠指定拖拽的邊界，在拖拽過程中，能夠觸發幾個自己定義事件
先說明一下我寫的外掛程式的原則：
1.常量分離出來，放在$.zui.外掛程式中
2.外掛程式的主體執行函式命名為$.zui.外掛程式.fn
3.銷毀函式命名為$.zui.外掛程式.unfn
這些規範，主要是為了以後寫其它外掛程式時，放在一起，精簡**用的，以後可能還會新增�其它規則，以寫出乙個骨架來。
拖拽的原理事實上比較簡單，就是在滑鼠落下後，加入�乙個mousemove事件，讓元素尾隨滑鼠移動，滑鼠抬起後，移除剛才的事件。別看以下的**那麼多，事實上多數是控制元素拖拽的範圍的，把這些**忽略後，其餘的東西，非常少。
基本的兩段**例如以下：
$.zui = $.zui || {}
/** draggable
* 引數：obj,與上乙個引數相互排斥
* fncomputeposition:擴充套件函式，返回形如的物件
* }* 支援的自己定義事件:
* "draggable.start":drag起始，就是滑鼠down後觸發
* "draggable.move":drag過程中多次觸發
* "draggable.stop":drag結束觸發，就是滑鼠up後觸發
*///draggable常量
$.zui.draggable = ,
sflagname:"zuidraggable",
seventname:"zuidraggableevent",
soptsname:"draggableopts"
} $.zui.draggable.fn = function(ele,opts),$.zui.draggable.defaults,opts));
//假設該引數已經執行過draggable了，直接返回，僅相當於改動了配置引數
if(jqele.data($.zui.draggable.sflagname))
jqele.data($.zui.draggable.sflagname,true);
jqele.data($.zui.draggable.seventname,;
if(opts.fncomputeposition)else
var oboundary = opts.oboundary;
if(opts.boffsetparentboundary);
oboundary.iminleft = 0;
oboundary.imintop = 0;
oboundary.imaxleft = eparent.clientwidth - jqthis.outerwidth();
oboundary.imaxtop = eparent.clientheight - jqthis.outerheight();
}if(oboundary)
jqthis.css();
ev.preventdefault();
jqthis.trigger("draggable.move");
}var oevent =
};$(document).on(oevent);
}});
jqele.on(jqele.data($.zui.draggable.seventname));
} $.zui.draggable.unfn = function(e)
}
須要說明的有幾點：
1.滑鼠落下後，要記錄滑鼠相對元素的位置，mousemove的過程中，要把這段距離減去；
2.jquery的data方法，這種方法很方便，能夠講資料和相應的元素繫結，jq.data(key,value)就出儲存，jq.data(key)就是讀取，jq.data(obj)也是儲存。
3.undraggable就是把事件函式去掉了
4.jquery的on方法很強大，加入�後還能夠使用trigger方法來觸發，有興趣的同學能夠到官方看看api，on方法很暴躁，這裡的自己定義函式，就是用這兩個方法實現的。
5.這裡是把方法放在了$函式上,最後要把這種方法放在$.fn上，例如以下：
$.each(["draggable"],function(i,widget);
w[widget] = function(args));
return this;
};w[unwidget] = function());
return this;
}$.fn.extend(w);
});
each除了在jq物件上用之外，還能夠使用$.each(array,fncallback);之後加入�新的外掛程式後，依照我之前的標準寫，僅僅須要在第乙個引數上加入�其它字串就能夠了。
細緻看看，就是加入�了兩個方法：draggable和undraggable；這兩函式都呼叫this.each方法，讓dragable和undraggable能夠再每乙個元素上都執行。
最後，用乙個匿名函式自執行把他們都包起來，為了防止$符號被其它的外掛程式使用，傳乙個jquery過去：
(function($))(jquery);到此為止，這個外掛程式就寫完啦。以下是demo的鏈結位址。
拖拽demo
自己寫的乙個Js小外掛程式
這是效果圖。上面乙個過濾標籤。下面彈出框，選擇日，周，月。我的用途主要是報表查詢的時候根據這 種型別來查詢資料用的。這裡分享下 js function container.find filterdiv,filterparamdiv mouseout function var ps extend we...
自己寫的乙個jQuery對聯廣告外掛程式
效果圖 檔案的位置擺放 外掛程式的 1 function 32 options extend defaults,options 33var html 34if options.leftadvstr 1 40if options.rightadvstr 1 47 dladvleftclose,dlad...
自己寫的乙個jQuery對聯廣告外掛程式
效果圖 檔案的位置擺放 外掛程式的 1 function 32 options extend defaults,options 33var html 34if options.leftadvstr 1 40if options.rightadvstr 1 47 dladvleftclose,dlad...