javascript - 使用 jQuery 实现列调整大小

Question

我正在尝试使用 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.

Answer 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