Удержание курсора мыши над ручкой при перемещении мыши

0

Здесь я создал простой редактор столбцов таблицы:

http://jsfiddle.net/44k6c/

Я не могу использовать плагин для этого, но мне нужно имитировать функциональность в этом плагине:

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');

 })
 })
Теги:

1 ответ

1
Лучший ответ

Это решение jsFiddle разрешает проблему?

Вероятно, у вас была проблема в следующих строках:

thWidth = thWidth - 1;
nextColWidth = nextColWidth + 1;

это, вероятно, должно быть:

thWidth = thWidth - currentXPos + e.pageX;
nextColWidth = nextColWidth + currentXPos - e.pageX;

EDIT: Плохая ссылка. Используйте это: http://jsfiddle.net/44k6c/4/

  • 0
    Да, конечно. Большое спасибо

Ещё вопросы

Сообщество Overcoder
Наверх
Меню