Здесь я создал простой редактор столбцов таблицы:
Я не могу использовать плагин для этого, но мне нужно имитировать функциональность в этом плагине:
http://quocity.com/colresizable/
Мне удалось хорошо изменить размер столбцов, но мой курсор может отойти от дескриптора (серый ящик в th). Мне нужно каким-то образом ограничить курсор, чтобы он оставался над дескриптором, когда мышь перемещается. Я посмотрел исходный код плагина выше, но он не пролил свет на то, как этого добиться.
Мой код js - это незавершенная работа и довольно грубая на данный момент:
$(document).ready(function () {
var th,
previousColIndex,
nextColIndex,
previousColWidth,
nextColWidth,
thWidth,
currentXPos;
$('.resize').mousedown(function(e) {
currentXPos = e.pageX;
th = $(this).parent();
nextColIndex = th.index() + 1;
nextColWidth = $('table tr th').eq(nextColIndex).width();
thWidth = th.width();
$(document).bind('mousemove',function(e){
if(e.pageX < currentXPos) {
thWidth = thWidth - 1;
nextColWidth = nextColWidth + 1;
$('table tr td').eq(th.index()).css({'width': thWidth + 'px'});
th.css({'width':thWidth + 'px' });
$('table tr td,table tr th').eq(nextColIndex).css({'width': nextColWidth + 'px'});
currentXPos = e.pageX;
} else {
thWidth = thWidth + 1;
nextColWidth = nextColWidth - 1;
$('table tr td').eq(th.index()).css({'width': thWidth + 'px'});
th.css({'width':thWidth + 'px' });
$('table tr td,table tr th').eq(nextColIndex).css({'width': nextColWidth + 'px'});
currentXPos = e.pageX;
}
})
}).mouseup(function(){
$(document).unbind('mousemove');
})
$(document).mouseup(function() {
$(document).unbind('mousemove');
})
})
Это решение jsFiddle разрешает проблему?
Вероятно, у вас была проблема в следующих строках:
thWidth = thWidth - 1;
nextColWidth = nextColWidth + 1;
это, вероятно, должно быть:
thWidth = thWidth - currentXPos + e.pageX;
nextColWidth = nextColWidth + currentXPos - e.pageX;
EDIT: Плохая ссылка. Используйте это: http://jsfiddle.net/44k6c/4/