實現使用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