jquery ui draggable start position wrong。恢复偏移量

Question

我需要禁用灰色单元格上的拖放块。但不是该单位返回正确的位置。获得了轻微的抵消。以下是一个示例：http://jsfiddle.net/G3fLu/2/

ClientServicePlanController = function(args) {

// This
// ----
var controller = this;

this.data = {};

if (args.client != null) controller.data.client = args.client;

// Init widget
// -----------
this.widget = $(args.widget);

this.tableUserNames = $(this.widget).find('.table-user-names');
this.tablePlan = $(this.widget).find('.table-plan');
this.cells = $(controller.tablePlan).find('td');
this.serviceItems = $(controller.tablePlan).find('.service-item');

this.cellWidth = $(this.cells).first().width();
this.cellHeight = $(this.cells).first().height();

$(this.tablePlan).width($(this.widget).width() - $(this.tableUserNames).width()-1);

$(this.serviceItems).draggable({
    snap: 'td',
    grid: [ controller.cellWidth, controller.cellHeight ],
    containment: $(controller.widget),
    scroll:true,
    start: function(event, ui) {
        console.log(ui);
    },
    revert: function(element) {
        console.log(element);
        if ($(element).hasClass('disabled')) return true;
    },
    stack: "div"
});


$(this.cells).droppable({
    accept : $(controller.serviceItems),
    activeClass: "state-active",
    hoverClass: "state-hover",
    tolerance: "intersect"
});


$(this.serviceItems).each(function(){

    var serviceItem = $(this);

    $(serviceItem)
        .outerWidth(controller.cellWidth * $(serviceItem).data('cell'))
        .outerHeight(controller.cellHeight);

});

如何做到这一点会阻止灰色细胞的不均匀性？