ドラッグで要素をリサイズするjQuery
chromeではtextareaのリサイズがデフォルトで出来るようになっていますが、IEではその機能には対応されていないため自作のプラグインで対応できるようにしてみました。
textareaの他にもdivタグなどのHTML要素であれば、何でもリサイズが可能です。
今回は、このjQueryプラグイン「jquery.funcResizeBox.js」の使い方とソースコードを紹介します。
動作確認済み環境
- jQuery 2.0.3
- Internet Explorer 10 / 11
- Google Chrome 43.0
ドラッグで要素をリサイズ出来るjQuery
jquery.funcResizeBox.jsの使い方
jquery.funcResizeBox.jsを読み込ませ、リサイズを行う要素に対して以下のスクリプトを設定します(以下のパラメータの値が未指定の場合のデフォルト値)
jQuery
$('リサイズを行う要素のID').funcResizeBox({
minWidth: 0, // リサイズ可能な最少の幅(px)
minHeight: 0, // リサイズ可能な最少の高さ(px)
maxWidth: 10000, // リサイズ可能な最大の幅(px)
maxHeight: 10000, // リサイズ可能な最大の高さ(px)
mouseRange: 10, // リサイズイベントを取得する範囲(px)
isWidthResize:true, // 水平方向のリサイズのON/OFF
isHeightResize:true // 垂直方向のリサイズのON/OFF
});
パラメータ未指定
パラメータを指定し無い場合は以下のようになります。
HTML
<textarea id="textareaid1" style="width:300px;height:18px;"> リサイズが可能です </textarea>
jQuery
$('#textareaid1').funcResizeBox({ });
縦・横の長さを指定する
[minWidth]/[maxWidth], [minHeight]/[maxHeight]に値を設定すると縦幅と横幅に最少・最大値を設定が出来ます。
HTML
<textarea id="textareaid2" style="width:300px;height:50px;"> リサイズが可能です </textarea>
jQuery
$('#textareaid2).funcResizeBox({
minHeight:30,
maxHeight:100,
minWidth:50,
maxWidth:400
});
垂直方向のみリサイズ
[isWidthResize]をfalseにすると、水平方向のリサイズが無効となります。
<textarea id="textareaid3" style="width:300px;height:18px;"> 垂直方向のリサイズのみ可能です </textarea>
jQuery
$('#textareaid3).funcResizeBox({
isWidthResize:false
});
水平方向のみリサイズ
[isHeightResize]をfalseにすると、垂直方向のリサイズが無効となります。
<textarea id="textareaid4" style="width:300px;height:18px;"> 水平方向のリサイズのみ可能です </textarea>
jQuery
$('#textareaid4).funcResizeBox({
isHeightResize:false
});
マウスイベント取得範囲の拡大
[mouseRange]の値を大きくすると、リサイズイベントの取得範囲が拡大できます。
<textarea id="textareaid4" style="width:400px;height:18px;"> ボーダーから100pxまでリサイズイベントを取得 </textarea>
jQuery
$('#textareaid5).funcResizeBox({
mouseRange:100
});
パラメータで指定できる機能は以上です。例では全てtextareaを使用しましたが、このようにdivタグを指定すればdivタグのリサイズも可能です。
HTML
<div id="divid" style="border:1px solid #aaa; width:300px; height:100px;"> </div>
jQuery
$('#divid').funcResizeBox({ });
jquery.funcResizeBox.jsのソースコード
jquery.funcResizeBox.js
(function($){
$.fn.funcResizeBox = function(userOptions){
var elements = this;
var defaults = {minWidth: 0,
minHeight: 0,
maxWidth: 10000,
maxHeight: 10000,
mouseRange: 10,
isWidthResize:true,
isHeightResize:true};
var option = $.extend(defaults,userOptions);
$(this).css('resize', 'none');
$(this).css('overflow', 'auto');
var pos_left = $(this).offset().left;
var pos_top = $(this).get(0).offsetTop;
var pos_right = $(this).outerWidth() + pos_left;
var pos_bottom = $(this).outerHeight() + pos_top;
var right_min = pos_right - option.mouseRange;
var bottom_min = pos_bottom - option.mouseRange;
var right_flg = false;
var bottom_flg = false;
var $box = $(this);
var resize_flg = false;
$(this).mousemove(function(e){
if(resize_flg) return;
right_flg = false;
bottom_flg = false;
pos_left = $box.offset().left;
pos_top = $box.offset().top;
pos_right = $box.outerWidth() + pos_left;
pos_bottom = $box.outerHeight() + pos_top;
right_min = pos_right - option.mouseRange;
bottom_min = pos_bottom - option.mouseRange;
var pagex = window.event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
var pagey = window.event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
// right
if(pagex <= pos_right && right_min <= pagex
&& pos_top <= pagey && pagey <= pos_bottom && option.isWidthResize)
{
right_flg = true;
}
// bottom
if(pagex <= pos_right && pos_left <= pagex
&& bottom_min <= pagey && pagey <= pos_bottom && option.isHeightResize)
{
bottom_flg = true;
}
if(right_flg && bottom_flg)
{
$(this).css('cursor','se-resize');
}
else if(right_flg)
{
$(this).css('cursor','e-resize');
}
else if(bottom_flg)
{
$(this).css('cursor','n-resize');
}
else{
$(this).css('cursor','auto');
}
});
$(this).mousedown(function(e){
var resize_right_flg = false;
var resize_bottom_flg = false;
var pagex = e.pageX;
var pagey = e.pageY;
var boxWidth = $box.width();
var boxHeight = $box.height();
if(right_flg){
resize_right_flg = true;
}
if(bottom_flg){
resize_bottom_flg = true;
}
$(document).mousemove(function(e){
if(!resize_right_flg && !resize_bottom_flg)
return;
$('body').css('cursor', $box.css('cursor'));
resize_flg = true;
var addWidth = e.pageX - pagex;
var resize_width = boxWidth + addWidth
if(resize_right_flg && resize_width <= option.maxWidth
&& option.minWidth <= resize_width){
$box.width(resize_width);
}
var addheight = e.pageY - pagey;
var resize_height = boxHeight + addheight
if(resize_bottom_flg && resize_height <= option.maxHeight
&& option.minHeight <= resize_height){
$box.height(resize_height);
}
}).mouseup(function(){
$(document).off("mousemove");
resize_bottom_flg = false;
resize_right_flg = false;
resize_flg = false;
$('body').css('cursor','auto');
});
});
return(this);
};
})(jQuery);
Trackback URL
http://webnonotes.com/javascript-2/funcresizebox/trackback/No Comments Yet