javascript - 需要为单击和拖动列标题设置最小宽度

Question

单击并拖动时，我需要设置表头的最大宽度。

我试过css中的最大宽度和宽度。

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

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

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

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

标签： javascriptjqueryhtmlcss

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。

希望这可以帮助