Question

我正在使用jQuery.Gantt并尝试将自己的捕捉功能添加到图表中的条形图。

我最初的想法是在图表中创建每个单元格/日。可调整，并使用jQuery UI的“可调整大小的扩展”使这些元素可以捕捉，然后应该允许条形捕捉到单元格。

然而，细胞/天只是一个大元素中的重复背景图像，而不是单个HTML元素本身（正如我所想的那样）。

我的新想法是将图表上重新调整大小的条的长度与数值进行比较。例如，一个单元格= 24px，如果新宽度> 24且<36（因为单元格大小加半个单元格），则将元素的宽度设置回24，从而产生向后捕捉的外观。要向前捕捉，我检查新宽度＆gt; 36和＆lt; = 48然后将元素的宽度设置为48（两个单元格的大小）。

我已经完成了3个单元格大小的代码，如下所示：

var one_cell = 24;
var start_width;
var end_width;    

$(".selector").resizable(
    {
        handles 'e, w'
    },

    {
       stop: function(event, ui)
       {
           end_width = $(this).width();

           if(end_width <= one_cell)
           {
               $(this).width(one_cell); //Checks current size vs minimum size, if is less than or equal to one cell size, set to one cell size
           }
           else if(end_width > one_cell && end_width < 36)
           {
               $(this).width(one_cell);
           }
           else if(end_width > 36 && end_width <= 48)
           {
               $(this).width(48);
           }
           else if(end_width > 48 && end_width < 60)
           {
               $(this).width(48);
           }
           else if(end_width > 60 && end_width <= 72)
           {
               $(this).width(72);
           }

    }

});

我面临的问题是有很多单元格，如果我以这种方式执行此功能，则需要多行代码并且效率不高。

有人能帮助我改进这一点或指出我正确的方向吗？

我在想可能有办法使用模数运算符并以某种方式舍入以创建所需的效果。

Answer 1

好吧，我设法使用下面的代码解决了这个问题：

var one_cell = 24; //Width of one cell/day
var mod;
var start_width; //Width of element before resizing
var new_width; //Width after resizing

new_width = $(this).width();
mod = new_width % one_cell;

    if(new_width <= one_cell){ //Prevents half days
            $(this).width(one_cell);
    }
    else if(mod == 0){ //Set width to new width if dragged accurately
            $(this).width(new_width);
    }
    else if(mod >1 && mod <= 23 ){ //Snap Feature
            var mult = Math.ceil(new_width / one_cell);
            $(this).width(one_cell * mult);
    }

改进我自己的'snap to'功能到jQuery.Gantt

1 个答案: