javascript - 需要设置 Click & drag column headers 的最小宽度

Question

我需要在单击和拖动时设置表格标题的最大宽度。

我试过css中的max-width和width。

th {
    position: relative;
    max-width: 5px;
}

但这没有用。这是我的代码的链接:

https://codepen.io/jasongardner/pen/QNOXym

我需要固定宽度以将表格拖动一定距离。

Answer 1

我已经解决了你的问题。将您的 Javascript 更改为:

$(function() {
    var startX,
         startWidth,
         $handle,
         $table,
         pressed = false;

    $(document).on({
        mousemove: function(event) {
            if (pressed) {
                var newWidth = startWidth + (event.pageX - startX);
                if (newWidth > 300) {
                    $handle.width(300);
                } else {
                $handle.width(startWidth + (event.pageX - startX));
                }
            }
        },
        mouseup: function() {
            if (pressed) {
                $table.removeClass('resizing');
                pressed = false;
            }
        }
    }).on('mousedown', '.table-resizable th', function(event) {
        $handle = $(this);
        pressed = true;
        startX = event.pageX;
        startWidth = $handle.width();

        $table = $handle.closest('.table-resizable').addClass('resizing');
    }).on('dblclick', '.table-resizable thead', function() {
        // Reset column sizes on double click
        $(this).find('th[style]').css('width', '');
    });
});

这是我修改的代码:

if (pressed) {
   var newWidth = startWidth + (event.pageX - startX);
       if (newWidth > 300) {
           $handle.width(300);
       } else {
           $handle.width(startWidth + (event.pageX - startX));
       }
 }

我创建了变量“newWidth”并检查它是否大于 300。只有当它小于 300 时，它才会设置新的宽度。所以实际上您可以将 300 替换为您想要定义为最大宽度的任何数字。

希望对你有帮助