0

以下のようにjQueryを使用して列のサイズ変更を実装しようとしています（http://jsbin.com/uduNUbo/1/editを参照してください）

これが私のJSコードです 

     function resizeEvents(selector) {
        function XY(e, ele) {
            var parentOffset = ele.parent().offset();
            return e.pageX - parentOffset.left;
        }
        var checkPos;
        $(selector).on('mousedown', function () {
            $(this).attr('init', true);
            return false;
        });
        $(selector).on('mouseup', function () {
            $(this).attr('init', false);
        });
        $(selector).closest('div').on('mousemove', function (e) {
            var inits = $(this).find('.resize').filter(function(){
                return $(this).attr('init') == true; 
            });
            if (inits.length > 0) {
                var pos = XY(e, inits.first());
                if (!checkPos) {
                    checkPos = pos;
                    return false;
                } else {
                    var moved = checkPos - pos, a = moved > 0 ? 1 : -1 ;
                    th.prevAll().each(function () {
                        if (!$(this).hasClass('.resize')) {
                            $(this).width($(this).width() + a);
                        }
                    });
                    th.nextAll().each(function () {
                        if (!$(this).hasClass('.resize')) {
                            $(this).width($(this).width() - a);
                        }
                    });
                }
            }
        });
    }

    resizeEvents('.resize');

しかし、これは機能していません。私の質問はIs mousemove is written properly, to define properly on correct element or not.

4

1 に答える 1

1

私はあなたのためにコードを修正しました：

function resizeEvents(selector) {
  var selected;
  $(selector).on('mousedown', function () {
    selected = $(this);
    return false;
  });
  $(document).mouseup(function () {
    selected = null;
  }).mousemove(function(e) {
    var target = $(e.target);
    var table = target.parents('.table');
    if (table.length && selected) {
      var x = e.pageX - table.offset().left;
      var splitter_x = selected.offset().left;
      var prev = selected.prev();
      var next = selected.next();

      prev.width(prev.width() + (x - splitter_x));
      next.width(next.width() - (x - splitter_x));
    }
  });
}

http://jsbin.com/uduNUbo/5/edit

于 2013-08-26T11:09:41.243 に答える