javascript - Implementing Column resize using jQuery -
i trying implement column resizing using jquery below(please see http://jsbin.com/udunubo/1/edit)
here js code
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, = 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');
but not working, question is mousemove written properly, define on correct element or not
.
i fixed code you:
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)); } }); }
Comments
Post a Comment