雖然現(xiàn)如今vue、angular等的框架大行其道念搬，但是jQuery依然還是日常開(kāi)發(fā)非常常用的抑堡，而其中插件又是愛(ài)不釋手的，今天簡(jiǎn)單來(lái)看一下如何封裝一個(gè)簡(jiǎn)單的插件朗徊。
核心語(yǔ)法
<pre>
<script>
//定義好一個(gè)插件
$.fn.extend({
toRed(){
this.css(background:'red')
//這個(gè)方法被誰(shuí)引用首妖，this就是指被引用的jQuery對(duì)象
}
})
//下面開(kāi)始引用插件
$(function(){
$('div').toRed();
})
</script>
<body>
<div></div>
</body>
</pre>
1.一個(gè)拖拽案例
<pre>
<script>
$.fn.extend({
drag(){
//this在這里表示被外面哪一個(gè)元素引用的jQuery對(duì)象
let oDiv=this;
oDiv.on('mousedown',function(ev){
let disx=ev.clientX-oDiv.offset().left;
let disy=ev.clientY-oDiv.offset().top;
function fnMove(ev){
let l=ev.clientX-disx;
let t=ev.clientY-disy;
oDiv.css({
left:l+'px',
top:t+'px'
})
return false;
}
function fnUp(){
$(document).off('mousemove',fnMove);
$(document).off('mouseup',fnUp);
}
$(document).on('mousemove',fnMove);
$(document).on('mouseup',fnUp);
})
}
})
//在這里引用插件中封裝好的drag方法
$(function(){
$('div').drag();
})
</script>
<body>
<div id="div"></div>
</body>
</script>
</pre>
2.一個(gè)可以傳參數(shù)的拖拽
defaultConfig,當(dāng)中可以設(shè)置任意參數(shù)。el代表可以進(jìn)行拖拽哪個(gè)元素爷恳，還有距離四個(gè)方向的距離有缆，如果不傳遞那么就是默認(rèn)的。
<pre>
<script>
$.fn.extend({
drag(options){
let oDiv=this;
let defaultConfig={
el:oDiv,
left:0,
top:0,
right:document.documentElement.clientWidth,
bottom:document.documentElement.clientHeight
}
//這里需要將外部傳遞的參數(shù)和這里默認(rèn)的值進(jìn)行校驗(yàn)
let config=$.extend(defaultConfig,options);
let el;
//判斷是否傳遞控制哪一個(gè)元素温亲，如果不傳默認(rèn)是oDiv
if(typeof(config.el)=="string"){
el=oDiv.find(config.el);
}else{
el=oDiv;
}
el.on('mousedown',function(ev){
let disx=ev.clientX-el.offset().left;
let disy=ev.clientY-el.offset().top;
function fnMove(ev){
let l=ev.clientX-disx;
let t=ev.clientY-disy;
if(l<config.left){
l=config.left;
}
if(l>config.right-oDiv.outerWidth()){
l=config.right-oDiv.outerWidth();
}
if(t<config.top){
t=config.top;
}
if(t>config.bottom){
t=config.bottom-oDiv.outerHeight();
}
oDiv.css({
left:l+'px',
top:t+'px'
})
return false;
}
function fnUp(){
$(document).off('mousemove',fnMove);
$(document).off('mouseup',fnUp);
}
$(document).on('mousemove',fnMove);
$(document).on('mouseup',fnUp);
})
}
})
$(function(){
//直接引用妒貌，并且傳遞了四個(gè)參數(shù)，代表了只有在span元素上的拖拽才會(huì)生效铸豁，并且限制div元素的四個(gè)最大方向
$('div').drag({
el:'span',
right:600,
left:50,
bottom:600
});
})
</script>
</head>
//當(dāng)然這里的div都沒(méi)有設(shè)置樣式灌曙，還須自己設(shè)置，span標(biāo)簽可以隨意設(shè)置任何標(biāo)簽
<body>
<div id="div">
<span></span>
</div>
</body>
</pre>
