LoginSignup
16
15

More than 5 years have passed since last update.

jQueryを使ってドラッグ&ドロップでリサイズできる関数を作る

Posted at

jQueryを使って要素のリサイズが出来る関数を作ってみた。
ついでにクッキーに保存して後でまた使えるようにしてみた。

resize.js
/**
 * 指定した要素の幅をリサイズする関数
 * リサイズした幅はクッキーに保存する
 */
function initTableResizer(targetId){
    var target = null;
    var width;

    //指定した要素外にマウスをドラッグした場合の処理
    $(window).mousemove(function(e){
        if (target != null) {
            width = e.clientX - parseInt ($('#' + targetId).offset().left);
            $('#' + targetId).css ({ width: width + 'px' });
            return false;
        }
        return false
    });

    //指定した要素内にマウスをドラッグした場合の処理
    $('#' + targetId).mousemove (function (e) {
        var right = parseInt ($(this).offset().left) + parseInt($(this).css("width"));
        if ((right - 10) < e.clientX) {
            if (e.clientX < (right + 10)) {
                $(this).css ({ cursor: 'col-resize' });
                return false;
            }
        }
        $(this).css ({ cursor: 'default' });
        return true;
    });

    //マウスを押した時cusorがcol-resizeになっていた場合bodyの何処にマウスを動かしてもcol-resizeになる処理
    $('#' + targetId).mousedown (function (e) {
        if ($(this).css('cursor') == 'col-resize') {
            target = $(this);
            $(document.body).css ({ cursor: 'col-resize' });
            return false;
        }
        return true;
    });

    //マウスを放したときクッキーに放したときのサイズを保存しcursorを元に戻す処理
    $(window).mouseup (function (e) {
        $.cookie('width', width);

        target = null;
        $(document.body).css ({ cursor: '' });
    });
}
16
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
15