Javascript 可调整大小的选项卡区域

我希望在页面中的选项卡上有一个可调整大小的选择器，所以我使用了Jquery UI可调整大小的组件。但我在确定所选标签的数量等方面面临问题

注意：可以从两端调整div的大小

这是我的小提琴：

有没有jquery插件可以为我提供这种功能？

var enw = parseInt(Math.abs(newWidth / gridSize));

编辑：

我带着新的更新回来了。请检查这个

var选项卡=[]；
$（文档）.ready（函数（）{
$（'.dateTab ul li'）。每个（函数（）{
var tabNo=parseInt（$（this.html（），10）；
tabs.push（{'no'：tabNo，'right'：tabNo*（$（this.width（）+2）}）；
});
$（'#dDragHandler'）。可调整大小({
句柄：“e，w”，
网格：[32,32]，
距离：28，
最大宽度：940，
最小宽度：0，
调整大小：函数（事件、ui）{
},
停止：功能（事件、用户界面）{
var pos=$（'.dateDragHandler'）.offset（）；
变量宽度=$（'.dateDragHandler'）.width（）+1；
右变量=右位置+宽度；
var html=“所选选项卡数：”+parseInt（宽度/32,10）；
对于（变量i=0；i选择的第一个选项卡是：“+选项卡[i+1]。否；
}
如果（制表符[i]。右==右）{
html+=“
最近选择的选项卡为：“+tabs[i]。否；
}
}
$（'.dateInfoTab'）.html（html）；
}
});
});

是的，这是正确的，我正在使用它来查找所选选项卡的数量。当我将其添加到小提琴中时，它似乎选择了一个比光标悬停的数量少的选项卡，而不是所选的选项卡数量。我使用的是chrome。是的，使用的逻辑并不完美，因此有时由于这种不一致性，它显示的值较小。我也无法找到所选的特定选项卡，如..2,3,4,5。。我已经编辑了我的答案。我希望这将是必要的解决办法

var tabs = [];

$(document).ready(function(){

    $('.dateTab ul li').each(function(){
        var tabNo = parseInt($(this).html(),10);
        tabs.push({'no':tabNo, 'right':tabNo * ($(this).width() + 2)});
    });

    $('#dDragHandler').resizable({
        handles: 'e,w' ,
        grid: [32,32],
        distance: 28,
        maxWidth: 940,
        minWidth: 0,    
        resize: function(event, ui) {
                   },
        stop : function(event, ui) {

        var pos = $('.dateDragHandler').offset();
        var width  = $('.dateDragHandler').width()+1;
        var right = pos.right + width;

            var html = "Number of tabs selected: " + parseInt(width / 32, 10);


        for(var i = 0; i < tabs.length; i++) {
            if(tabs[i].right == pos.left) {
                html += "<br />First tab selected is: " + tabs[i + 1].no;
            }
            if(tabs[i].right == right) {
                html += "<br />Latest tab selected is: " + tabs[i].no;
            }
        }
        $('.dateInfoTab').html(html);

    }
    });
});