關於利用jQuery外掛程式實現盒子的拖拽

2021-08-27 11:20:38 字數 1408 閱讀 4868

首先,先寫乙個盒子

拖動

盒子完成後就可以寫外掛程式了。---------------------

;(function($)

var settings = $.extend(deafults,options);

// console.log(settings)

this.each(function(e)

if(t<0)

if(t>$(window).height()-$("#box").height())

if(l>$(window).width()-$("#box").width())

$("#box").css()

})$(document).mouseup(function())

})})})}

})(jquery)

首先一開始套用外掛程式的模板樣式。如下:

;(function($)

var options=$.extend(defaults,options);

this.each(function())

}})(jquery)

-----注意:要注重命名的規範性  以及  分清該this指的是誰,搞清此this的物件

------然後繼續分析:

var deafults =

此**的意思是給該盒子的預設顏色為紅色。(當然你也可以在呼叫的樣式的時候給他另外換乙個顏色)。

------然後就是拖動盒子的邏輯了:請看以下**。

$(function()

if(t<0)

if(t>$(window).height()-$("#box").height())

if(l>$(window).width()-$("#box").width())

$("#box").css()

})$(document).mouseup(function())

})})

外掛程式**完成後就是外掛程式的呼叫了:**如下。

預載入完成後就可以實現盒子拖拽的移動啦,趕緊來試試吧!!!

效果展示圖如下:

--------------謝謝--------------!

利用jquery外掛程式ocupload進行檔案上傳

tips 因為ocupload是基於jquery的外掛程式,所有必須和jquery一起匯入才能夠使用。一般情況下上傳檔案 這樣上傳檔案的同時,頁面會重新整理。如果不想讓頁面重新整理,可以加乙個iframe,並設定為不可見,就像這樣 還有一種方式就是利用jquery的外掛程式ocupload進行上傳 ...

關於jQuery外掛程式中datatables的學習

reference function inittable ajax function data,callback,settings else columns data的名字和你返回引數裡面json裡的名字相對應,title相當於th,表頭這樣子的,class代表樣式。else return data...

JQuery 有關於 ZTree 外掛程式

var ztree1 var setting var retrunobj setting async url portal inventorytypeaction gettree.action data callback beforecollapse function onclick ztreeon...