GridStack issue

clone dosent show right on modal

by Alain Dumesny

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gridstack-all.js"></script>

  <div class="container-fluid">
    <h1>Two grids with modal</h1>
    <button id="modal">
    Open Modal
    </button>
<div class="modal" id="CustomEtq" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="CustomEtq" aria-hidden="true">
    <div class="modal-dialog modal-fullscreen">
        <div class="modal-content">
            <div class="modal-header bg-primary">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
    <div class="row">
      <div class="col-md-3">
        <div class="sidebar">
          <!-- will size to match content -->
          <div class="grid-stack-item">
            <div class="grid-stack-item-content">Drag me</div>
          </div>
          <!-- manually force a drop size of 2x1 -->
          <div class="grid-stack-item" gs-w="2" gs-h="1" gs-max-w="3">
            <div class="grid-stack-item-content">2x1, max=3</div>
          </div>
        </div>
      </div>
      <div class="col-md-9">
        <div class="trash ui-droppable" id="trash">
        </div>
      </div>
    </div>
    <div class="row" style="margin-top: 20px">
      <div class="col-md-6">
        <a onclick="toggleFloat(this, 0)" class="btn btn-primary" href="#">float: true</a>
        <a onclick="compact(0)" class="btn btn-primary" href="#">Compact</a>
     ...

CSS

/* Optional styles for demos */
.btn-primary {
  color: #fff;
  background-color: #007bff;
}

.btn {
  display: inline-block;
  padding: .375rem .75rem;
  line-height: 1.5;
  border-radius: .25rem;
}

a {
  text-decoration: none;
}

h1 {
  font-size: 2.5rem;
  margin-bottom: .5rem;
}

.grid-stack {
  background: #FAFAD2;
}

.grid-stack-item-content {
  text-align: center;
  background-color: #18bc9c;
}

.grid-stack-item-removing {
  opacity: 0.5;
}
.trash {
  height: 100px;
  background: rgba(255, 0, 0, 0.1) center center...

JavaScript

$(function() {
$('#modal').on('click',function(){
var myModal = new bootstrap.Modal(document.getElementById('CustomEtq'))
  myModal.show();
})
  
  //min-heigh pra introduzir o menor tamanho selecionado.

  function customClone(event) {
    const el = event.target.cloneNode(true);
    el.setAttribute('gs-id', 'foo');
    return el;
  }
})

let options = {
      column: 12,
      minRow: 1, // don't collapse when empty
      cellHeight: 70,
      disableOneColumnMode: true,
      float: true,
      removable: '.trash', // true or drag-out delete class
      // itemClass: 'with-lines', // test a custom additional class #2110
      acceptWidgets: function(el) { return true } // function example, but can also be: true | false | '.someClass' value
    };
    let grids = GridStack.initAll(options);
    grids[1].float(false);

    // new 4.x static method instead of setting up options on every grid (never been per grid really)
    GridStack.setupDragIn('.sidebar .grid-stack-item', { appendTo: 'body', helper: myClone });
    // GridStack.setupDragIn(); // second call will now work (cache last values)

    let items = [
      {x: 0, y: 0, w: 2, h: 2},
      {x: 3, y: 1, h: 2},
      {x: 4, y: 1},
      {x: 2, y: 3, w: 3, maxW: 3, id: 'special', content: 'has maxW=3'},
      {x: 2, y: 5}
    ];

    grids.forEach(function (grid, i) {
      addEvents(grid, i);
      grid.load(items);
    });

    // decide what the dropped item will be - for now just a clone but can be anything
    function myClone(event) {
      const el = event.target.cloneNode(true);
      el.setAttribute('gs-id', 'foo'); // TEST why clone element is not used directly on drop #2231
      return el;
    }

    function toggleFloat(button, i) {
      grids[i].float(! grids[i].getFloat());
      button.innerHTML = 'float: ' + grids[i].getFloat();
    }

    function compact(i) {
      grids[i].compact();
    }

function addEvents(grid, id) {
  let g = (id !== undefined ? 'grid' + id + ' ' : '');

 ...