Блог

Я создаю веб-страницу, которая включает в себя сетку Gridstack. Я инициализирую его следующим образом:

 <script type="text/javascript">
  var grid = GridStack.init({
    acceptWidgets: false,                         // Accept widgets from other grids or from outside.
    alwaysShowResizeHandle: true,                 // Should resize handle be visible at all times or only at hover.
    animate: false,                               // ???
    auto: true,                                   // Should Gridstack automaticaly initialize it's items?
    cellHeight: "155px",                          // One cell height.
    column: 48,                                   // Number of columns to which to snap to.
    disableDrag: false,                           // Eanble or disable dragging.
    disableOneColumnMode: true,                   // Disable "one-column" mode when width equals minimal width.
    disableResize: false,                         // Enable or disable resizing.
    draggable: true,                              // ???
    dragOut: true,                                // Prevent dragging items outside of their parent element.
    float: true,                                  // Enable floating tiles.
    handle: '.grid-stack-item-content',           // Select draggable handle class.
    handleClass: 'grid-stack-item-content',       // Select draggable handle class (override).
    itemClass: 'grid-stack-item',                 // Choose class, which will be treated as a tile.
    maxRow: 12,                                   // Maximum rows where zero means unlimited.
    minRow: 1,                                    // Minimum rows to prevent empty grid from colapsing.
    minWidth: 768,                                // Constant width which determines, when "one-column" mode is triggered.
    oneColumnDomSort: false,                      // ???
    placeholderClass: 'grid-stack-placeholder',   // Select placeholder class.
    placeholderText: '',                          // Text inside a placeholder.
    resizable: {                                  // Should resize handle be visible at all times or only at hover (override). 
      autoHide: false,
      handles: 'n, nw, w, sw, s, se, e, ne'
    },
    removeable: false,                            // Enables removing of tiles if they are dragged outside of the grid.
    removeTimeout: 2000,                          // Time in "ms" before tiles dragged out of the grid are removed.
    row: 48,                                      // Fixed number of rows where zero means unlimited.
    rtl: false,                                   // Right to left mode.
    staticGrid: false,                            // Prevent any kind of resizing or drag amp; drop functionalities.
    verticalMargin: 20,                           // Vertical gap between tiles.               
  });
</script>
  

И затем я динамически создаю виджет, то есть плитку, используя:

 <!-- Gridstack: Example of adding a tile i.e. widget -->
<script>
  grid.addWidget(`
    <div>
      <div class="grid-stack-item-content">
        <p>...</p>
      </div>
    </div>`,
  0,0,1,1,true,1,48,1,48,"ID");
</script>
  

Это создает виджет в Chromium, Firefox, Edge. Но не в IE11. Кто-нибудь знает, что я мог делать неправильно? Похоже, я делаю все по руководству…

Это консольный журнал в IE11:

И если я нажму на ошибку, я получу эту строку, где, кажется, нет странных символов: