gridstack api翻譯

gridstack.js API

Table of Contents generated with DocToc

• Options 配置
• Grid attributes 網格屬性
• Item attributes 元素屬性
• Events 事件
• • added(event, items) 添加
  • change(event, items) 改變
  • disable(event) 停用
  • dragstart(event, ui) 拖拽開始
  • dragstop(event, ui) 拖拽結束
  • enable(event) 啟用
  • removed(event, items) 移除
  • resizestart(event, ui) 縮放開始
  • resizestop(event, ui) 縮放結束
• API
• • addWidget(el[, x, y, width, height, autoPosition, minWidth, maxWidth, minHeight, maxHeight, id])添加控件
  • batchUpdate() 批量更新
  • cellHeight() 單位元素高度
  • cellHeight(val) 
  • cellWidth() 單位元素寬度
  • commit() 提交變更
  • destroy([detachGrid]) 銷毀
  • disable()禁用
  • enable()啟用
  • enableMove(doEnable, includeNewWidgets)啟用移動
  • enableResize(doEnable, includeNewWidgets)啟用縮放
  • getCellFromPixel(position[, useOffset])通過像素點獲取元素點對應的網格寬度和高度
  • isAreaEmpty(x, y, width, height)判斷區域是否為空
  • locked(el, val)鎖定
  • makeWidget(el)
  • maxHeight(el, val)
  • minHeight(el, val)
  • maxWidth(el, val)
  • minWidth(el, val)
  • movable(el, val)
  • move(el, x, y)
  • removeWidget(el[, detachNode])
  • removeAll([detachNode])
  • resize(el, width, height)
  • resizable(el, val)
  • setAnimation(doAnimate)
  • setGridWidth(gridWidth, doNotPropagate)
  • setStatic(staticValue)
  • update(el, x, y, width, height)
  • verticalMargin(value, noUpdate)
  • willItFit(x, y, width, height, autoPosition)
• Utils
• • GridStackUI.Utils.sort(nodes[, dir[, width]])

Options

• acceptWidgets - if true of jquery selector the grid will accept widgets dragged from other grids or from outside (default:false) See example
• alwaysShowResizeHandle - if true the resizing handles are shown even if the user is not hovering over the widget (default: false) 如果設置成 true 那么控制大小縮放的手柄即時在用戶沒有將鼠標移動到組件上都會一直顯示。 (默認值: false)
• animate - turns animation on (default: false) 打開動畫效果 (默認值: false)
• auto - if false gridstack will not initialize existing items (default: true)  如果設置成 false gridstack 將不會初始化已經存在的項 (默認值: true)
• cellHeight - one cell height (default: 60). Can be:一個單元格的高度
• • an integer (px) 整形
  • a string (ex: '10em', '100px', '10rem') 字符串
  • 0 or null, in which case the library will not generate styles for rows. Everything must be defined in CSS files.0或者null，在這種情況下庫將不會為rows自動生成樣式。任何元素都必須在css文件被中定義。
  • 'auto' - height will be calculated from cell width. auto 高度將根據單元格寬度計算 
• ddPlugin - class that implement drag'n'drop functionallity for gridstack. If false grid will be static. (default: null - first available plugin will be used) 實現gridstack拖動的功能的類，如果設置成faslse，網格將是靜態的。
• disableDrag - disallows dragging of widgets (default: false).
• disableResize - disallows resizing of widgets (default: false).
• draggable - allows to override jQuery UI draggable options. (default: {handle: '.grid-stack-item-content', scroll: false, appendTo: 'body'})允許重寫JQuery UI的拖拽配置項。
• handle - draggable handle selector (default: '.grid-stack-item-content') 可拖動手柄的選擇器 (默認值: '.grid-stack-item-content')
• handleClass - draggable handle class (e.g. 'grid-stack-item-content'). If set handle is ignored (default: null)
• height - maximum rows amount. Default is 0 which means no maximum rows 最大行數
• float - enable floating widgets (default: false) See example 啟用浮動控件
• itemClass - widget class (default: 'grid-stack-item')  部件類，默認是‘grid-stack-item’
• minWidth - minimal width. If window width is less, grid will be shown in one-column mode (default: 768)最小寬度
• oneColumnModeClass - class set on grid when in one column mode (default: 'grid-stack-one-column-mode')
• placeholderClass - class for placeholder (default: 'grid-stack-placeholder') 占位符類
• placeholderText - placeholder default content (default: '') 占位符的文本信息
• resizable - allows to override jQuery UI resizable options. (default: {autoHide: true, handles: 'se'})允許重寫JQueryUI的縮放配置項
• removable - if true widgets could be removed by dragging outside of the grid. It could also be a jQuery selector string, in this case widgets will be removed by dropping them there (default: false) See example如果設置成true控件將能被拖拽到表格的外面。他也可以是一個JQuery的選擇器的名稱字符串，在這種情況下控件將會被遺棄。
• removeTimeout - time in milliseconds before widget is being removed while dragging outside of the grid. (default: 2000)移除延時
• rtl - if true turns grid to RTL. Possible values are true, false, 'auto' (default: 'auto') See example
• staticGrid - makes grid static (default false). If true widgets are not movable/resizable. You don't even need jQueryUI draggable/resizable. A CSS class grid-stack-static is also added to the container.
• verticalMargin - vertical gap size (default: 20). Can be:垂直間距大小
• • an integer (px)
  • a string (ex: '2em', '20px', '2rem')
• width - amount of columns (default: 12) 列的數量

Grid attributes

• data-gs-animate - turns animation on 開啟動畫效果
• data-gs-width - amount of columns  列的數量
• data-gs-height - maximum rows amount. Default is 0 which means no maximum rows. 最大行數量。默認值是 0 意思是沒有最大的行數
• data-gs-current-height - current rows amount. Set by the library only. Can be used by the CSS rules. 當前行的數量。只能通過庫文件配置，可以使用css規則

Item attributes

• data-gs-x, data-gs-y - element position 元素位置
• data-gs-width, data-gs-height - element size 元素尺寸
• data-gs-max-width, data-gs-min-width, data-gs-max-height, data-gs-min-height - element constraints 元素約束
• data-gs-no-resize - disable element resizing 禁用元素縮放
• data-gs-no-move - disable element moving 禁用元素移動
• data-gs-auto-position - tells to ignore data-gs-x and data-gs-y attributes and to place element to the first available position 
• data-gs-locked - the widget will be locked. It means another widget wouldn't be able to move it during dragging or resizing. The widget can still be dragged or resized. You need to add data-gs-no-resize and data-gs-no-move attributes to completely lock the widget. - 部件將會被鎖定，這意味着另一個部件在拖動和縮放的時候不允許移動它 。但是該部件仍然能夠被拖動和縮放，所以你需要添加 data-gs-no-resize 和 data-gs-no-move屬性來完全鎖定該部件。

Events

added(event, items)

$('.grid-stack').on('added', function(event, items) {
    for (var i = 0; i < items.length; i++) {
      console.log('item added');
      console.log(items[i]);
    }
});

change(event, items)

Occurs when adding/removing widgets or existing widgets change their position/size

var serializeWidgetMap = function(items) {
    console.log(items);
};

$('.grid-stack').on('change', function(event, items) {
    serializeWidgetMap(items);
});

disable(event)

$('.grid-stack').on('disable', function(event) {
    var grid = event.target;
});

dragstart(event, ui)

$('.grid-stack').on('dragstart', function(event, ui) {
    var grid = this;
    var element = event.target;
});

dragstop(event, ui)

$('.grid-stack').on('dragstop', function(event, ui) {
    var grid = this;
    var element = event.target;
});

enable(event)

$('.grid-stack').on('enable', function(event) {
    var grid = event.target;
});

removed(event, items)

$('.grid-stack').on('removed', function(event, items) {
    for (var i = 0; i < items.length; i++) {
      console.log('item removed');
      console.log(items[i]);
    }
});

resizestart(event, ui)

$('.grid-stack').on('resizestart', function(event, ui) {
    var grid = this;
    var element = event.target;
});

resizestop(event, ui)

$( '.grid-stack'). on( 'resizestop',  function( event,  ui) {
var grid  =  this;
var element  =  event. target;
});  

來源： https://github.com/troolee/gridstack.js/blob/master/doc/README.md#dragstartevent-ui

null