table拖动改变列宽和行宽

2024年2月16日 61次阅读 来源: 万里飞鹏

使用jquery原文地址https://www.cnblogs.com/qq545505061/p/9647867.html；

初始话属性设置文档https://www.douban.com/note/86224998/

最新跟新，table加上属性width:fit-content;td设置初始宽度，这样拖动列宽，table行宽也能跟着动了并且自动产生滚动条，原先table只有table-layout:fixed；table行宽不变，拖动一个td就会影响其他的td宽度

 

$.widget( "ui.resizable", $.ui.mouse, {
   version: "1.12.1",
   widgetEventPrefix: "resize",
   options: {
      alsoResize: false,
      animate: false,
      animateDuration: "slow",
      animateEasing: "swing",
      aspectRatio: false,
      autoHide: false,
      /*classes: {
         "ui-resizable-se": "ui-icon ui-icon-gripsmall-diagonal-se"
      },*/
      containment: 'document',/**parent: 只能在父容器内拖动
    document: 在当前html文档的document下可拖动, 超出浏览器窗口范围时, 自动出现滚动条
    widow: 只能在当前浏览器窗口的内容区域拖动, 拖动超出当前窗口范围, 不会导致出现滚动条...
   数组: [x1, y1, x2, y2]以[开始水平坐标, 开始垂直坐标, 结束水平坐标, 结束垂直坐标]的方式划定一个区域, 只能在此区域内拖动. 这种方式指定时, 值是相对当前浏览器窗口内容区域左上角的偏移值.
   false: 不限制拖动的活动范围
[默认值]false*/
      ghost: false,
      grid: false,
      handles: "e",
      helper: false,
      maxHeight: null,
      maxWidth: null,
      minHeight: 10,
      minWidth: 10,

      // See #7960
      zIndex: 90,

      // Callbacks
      resize: null,
      start: null,
      stop: null
   },

 
    原文作者：万里飞鹏
    原文地址: https://blog.csdn.net/zhangtongpeng/article/details/100131169
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞