ホームページ > 記事 > ウェブフロントエンド > divドラッグ＆ドロッププラグイン——JQ.MoveBox.js（自作JQプラグイン）_jquery
divドラッグ＆ドロッププラグイン——JQ.MoveBox.js（自作JQプラグイン）_jquery
- WBOYオリジナル
- 2016-05-16 17:33:35980ブラウズ
しばらくブログを更新していませんでしたが、自分でも忙しくて勉強もあまり進んでいません。
今週の自由時間に、独自の JQ プラグインの作成方法を学びます。
ネイティブ JS を使用して div をドラッグするのと同様の効果を作成しました。今度は、JQ プラグイン作成の簡単な練習として、元のアイデアに基づいてそれを小さな JQ プラグインに変更しました。
html は
コードをコピーします コードは次のとおりです:
< ;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
class="float -box">
以下は JQ.MoveBox.js のコードのコピーです
コードは次のとおりです。
(function($){
var n = 1;
var o = {}
$.fn.MoveBox=function(options){
var opts = $.extend({}, $.fn.MoveBox.defaults, options);
return this.each(function(i){
$(this).mousedown(function(e){
o.iTop = $(this).position().top - e.pageY;
o.iLeft = $(this).position().left - e.pageX;
n ;
$this = $(this);
$this.css({'z-index':n});
$(document).bind("mousemove",function(e){
var iLeft = e.pageX o.iLeft;
var iTop = e.pageY o.iTop;
if(opts.out){
if(iLeft<-$this.parent().offset().left-parseInt($this.parent().css("border-left-width"))){
iLeft = -$this.parent().offset().left-parseInt($this.parent().css("border-left-width"));
}else if(iLeft>$(document).width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"))-$this.parent().offset().left-parseInt($this.parent().css("border-left-width"))){
iLeft = $(document).width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"))-$this.parent().offset().left-parseInt($this.parent().css("border-left-width"));
}
if(iTop<-$this.parent().offset().top-parseInt($this.parent().css("border-top-width")) $(document).scrollTop()){
iTop = -$this.parent().offset().top-parseInt($this.parent().css("border-top-width")) $(document).scrollTop();
}else if(iTop>$(window).height() $(document).scrollTop()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"))-$this.parent().offset().top-parseInt($this.parent().css("border-top-width"))){
iTop = $(window).height() $(document).scrollTop()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"))-$this.parent().offset().top-parseInt($this.parent().css("border-top-width"));
}
}else{
if(iLeft<0){
iLeft = 0;
}else if(iLeft>$this.parent().width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"))){
iLeft = $this.parent().width()-$this.width()-parseInt($this.css("border-left-width"))-parseInt($this.css("border-right-width"));
}
if(iTop<0){
iTop = 0;
}else if(iTop>$this.parent().height()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"))){
iTop = $this.parent().height()-$this.height()-parseInt($this.css("border-top-width"))-parseInt($this.css("border-bottom-width"));
}
}
$this.css({
'left':iLeft "px",
'top':iTop "px"
})
});
$(document).bind("mouseup",function(){
$(document).unbind("mousemove");
$(document).unbind("mouseup");
});
});
});
};
$.fn.MoveBox.defaults = {
out:false //默认不可跑出线外
};
})(jQuery);
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。