Monday, 25 January 2021

Jquery drag and drop with Muuri

I'd like to make an operational process creator. I need to have a left side column with actions, and I need to drag to right sided columns that can be in html or generated by a new column button.

I have some workarounds to do it that I dont know how to.

  1. the actions column ( left side ) cannot "lose" its item that was drag to other columns.
  2. the left side column don't receive any objects dragged from another column.

This is my code that is doing in a poor way only the first item. When drag some item to another collun this item does not adjust to layout.

var dragContainer = document.querySelector('.drag-container');
var itemContainers = [].slice.call(document.querySelectorAll('.board-column-content'));
var columnGrids = [];
var boardGrid;

// Init the column grids so we can drag those items around.
itemContainers.forEach(function(container) {
  var cloneMap = {};
  var grid = new Muuri(container, {
      items: '.board-item',
      dragEnabled: true,
      dragSort: function() {
        return columnGrids;
      },
      dragContainer: dragContainer,
      dragAutoScroll: {
        targets: item => {
          return [{
              element: window,
              priority: 0
            },
            {
              element: item.getGrid().getElement().parentNode,
              priority: 1
            }
          ];

        }
      }
    })
    .on('dragInit', function(item) {
      item.getElement().style.width = item.getWidth() + 'px';
      item.getElement().style.height = item.getHeight() + 'px';
    })
    .on('dragReleaseEnd', function(item) {
      item.getElement().style.width = '';
      item.getElement().style.height = '';
      item.getGrid().refreshItems([item]);
    }).
  on('layoutStart', function() {
      boardGrid.refreshItems().layout();
    }).on('receive', function(data) {
      cloneMap[data.item._id] = {
        item: data.item,
        grid: data.fromGrid,
        index: data.fromIndex
      };
    })
    .on('send', function(data) {
      delete cloneMap[data.item._id];
    })
    .on('dragReleaseStart', function(item) {
      var cloneData = cloneMap[item._id];
      if (cloneData) {
        delete cloneMap[item._id];

        var clone = cloneData.item.getElement().cloneNode(true);
        clone.setAttribute('class', 'item');
        clone.children[0].setAttribute('style', '');

        var items = cloneData.grid.add(clone, {
          index: cloneData.index,
          active: false
        });
        cloneData.grid.show(items);
      }
    });


  columnGrids.push(grid);
});


boardGrid = new Muuri('.board', {
  dragEnabled: true,
  layout: {
    horizontal: true
  },
  items: '.board-column',
  dragAxis: 'x',
  dragHandle: '.board-column-header:not(.noDrag)'
});




function generateBoard() {
  var itemElem = document.createElement('div');
  var itemTemplate = '<div class="board-column default"><div class="board-column-container"><div class="board-column-header">Nova</div><div class="board-column-content-wrapper"><div class="board-column-content w-100"></div></div></div></div>';
  itemElem.innerHTML = itemTemplate;
  boardGrid.add([itemElem.firstChild]);
  var dragContainer = document.querySelector('.drag-container');
  var itemContainers = [].slice.call(document.querySelectorAll('.board-column-content'));
  var lastitem = [itemContainers[itemContainers.length - 1]];
  lastitem.forEach(function(container) {
    var grid = new Muuri(container, {
      items: '.board-item',
      dragEnabled: true,
      dragSort: function() {
        return columnGrids;
      },
      dragContainer: dragContainer,
      dragAutoScroll: {
        targets: item => {
          return [{
              element: window,
              priority: 0
            },
            {
              element: item.getGrid().getElement().parentNode,
              priority: 1
            }
          ];

        }
      }
    }).


    on('dragInit', function(item) {
      item.getElement().style.width = item.getWidth() + 'px';
      item.getElement().style.height = item.getHeight() + 'px';
    }).
    on('dragReleaseEnd', function(item) {
      item.getElement().style.width = '';
      item.getElement().style.height = '';

      item.getGrid().refreshItems([item]);
    }).
    on('layoutStart', function() {
      boardGrid.refreshItems().layout();
    });

    columnGrids.push(grid);
  });

}

$("#newCol").click(function() {
  var board = generateBoard();
});
.removeSelecao:hover {
  cursor: pointer;
}

* {
  box-sizing: border-box;
}

html,
body {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: Helvetica, Arial, sans-serif;
}

body {
  margin: 0;
  padding: 20px 10px;
}

.drag-container {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
}

.board {
  position: relative;
  overflow-x: auto;
  width: 100% !important;
  height: 100vh;
}

.board-column {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0 10px;
  width: calc(100% / 5);
  z-index: 1;
}

.board-column.muuri-item-releasing {
  z-index: 2;
}

.board-column.muuri-item-dragging {
  z-index: 3;
  cursor: move;
}

.board-column-container {
  position: relative;
  width: 100%;
  height: 100%;
}

.board-column-header {
  position: relative;
  height: 50px;
  line-height: 50px;
  overflow: hidden;
  padding: 0 20px;
  text-align: center;
  background: #333;
  color: #fff;
  border-radius: 5px 5px 0 0;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .board-column-header {
    text-indent: -1000px;
  }
}

.board-column.azul .board-column-header {
  background: #4A9FF9;
}

.board-column.laranja .board-column-header {
  background: #f9944a;
}

.board-column.verde .board-column-header {
  background: #2ac06d;
}

.board-column-content-wrapper {
  position: relative;
  padding: 8px;
  background: #f0f0f0;
  height: calc(100vh - 250px);
  overflow-y: auto;
  border-radius: 0 0 5px 5px;
}

.wraperH {
  /*height: calc(100vh - 100px);*/
}

.board-column-content {
  position: relative;
  min-height: 100%;
}

.board-item {
  position: absolute;
  width: calc(100% - 16px);
  margin: 8px;
}

.board-item.muuri-item-releasing {
  z-index: 9998;
}

.board-item.muuri-item-dragging {
  z-index: 9999;
  cursor: move;
}

.board-item.muuri-item-hidden {
  z-index: 0;
}

.board-item-content {
  position: relative;
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  font-size: 17px;
  cursor: pointer;
  -webkit-box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0px 1px 3px 0 rgba(0, 0, 0, 0.2);
}

@media (max-width: 600px) {
  .board-item-content {
    text-align: center;
  }
  .board-item-content span {
    display: none;
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <title>Lista de Planos de Ações</title>
  <meta name="description" content="A responsive bootstrap 4 admin dashboard template by hencework" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


</head>

<body>
  <!-- Preloader -->
  <div class="preloader-it">
    <div class="loader-pendulums"></div>
  </div>
  <!-- /Preloader -->

  <!-- HK Wrapper -->
  <div class="hk-wrapper hk-alt-nav">

    <!-- Top Navbar -->
    <div th:replace="fragments/layout-navbar::navbar(userFullName=${user.firstName + ' ' + user.lastName})"></div>
    <!-- /Top Navbar -->


    <!-- Main Content -->
    <div class="hk-pg-wrapper">
      <!-- Container -->


      <div class="container-fluid mt-xl-50 mt-sm-30 mt-15">
        <div class="row">
          <div class='col-sm-2'>


            <div class="row">
              <div class="col-sm">
                <div class="board-column default w-100">
                  <div class="board-column-container">
                    <div class="board-column-header">Ferramentas</div>
                    <div class="board-column-content-wrapper">
                      <div class="board-column-content w-100">
                        <div class="board-item">
                          <div class="board-item-content"><span>Item #</span>1</div>
                        </div>
                        <div class="board-item">
                          <div class="board-item-content"><span>Item #</span>2</div>
                        </div>
                        <div class="board-item">
                          <div class="board-item-content"><span>Item #</span>3</div>
                        </div>
                        <div class="board-item">
                          <div class="board-item-content"><span>Item #</span>4</div>
                        </div>
                        <div class="board-item">
                          <div class="board-item-content"><span>Item #</span>5</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

          </div>
          <div class="col-sm-10">
            <section class="hk-sec-wrapper wraperH">
              <div class="row">
                <div class="col-sm">
                  <button type='button' class='btn btn-success mb-10 pull-right' id='newCol'><i class="fa fa-plus" aria-hidden="true"></i> Nova Coluna</button>
                </div>
              </div>
              <div class="row">
                <div class="col-sm">
                  <div class="drag-container"></div>
                  <div class="board">
                    <div class="board-column azul">
                      <div class="board-column-container">
                        <div class="board-column-header">Todo</div>
                        <div class="board-column-content-wrapper">
                          <div class="board-column-content w-100">
                            <div class="board-item">
                              <div class="board-item-content"><span>Item #</span>1</div>
                            </div>
                            <div class="board-item">
                              <div class="board-item-content"><span>Item #</span>2</div>
                            </div>
                            <div class="board-item">
                              <div class="board-item-content"><span>Item #</span>3</div>
                            </div>
                            <div class="board-item">
                              <div class="board-item-content"><span>Item #</span>4</div>
                            </div>
                            <div class="board-item">
                              <div class="board-item-content"><span>Item #</span>5</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="board-column laranja">
                      <div class="board-column-container">
                        <div class="board-column-header">Working</div>
                        <div class="board-column-content-wrapper">
                          <div class="board-column-content w-100">
                            <div class="board-item">
                              <div class="board-item-content"><span>Item #</span>6</div>
                            </div>
                            <div class="board-item">
                              <div class="board-item-content"><span>Item #</span>7</div>
                            </div>
                            <div class="board-item">
                              <div class="board-item-content"><span>Item #</span>8</div>
                            </div>
                            <div class="board-item">
                              <div class="board-item-content"><span>Item #</span>9</div>
                            </div>
                            <div class="board-item">
                              <div class="board-item-content"><span>Item #</span>10</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="board-column verde">
                      <div class="board-column-container">
                        <div class="board-column-header">Done</div>
                        <div class="board-column-content-wrapper">
                          <div class="board-column-content w-100">
                            <div class="board-item">
                              <div class="board-item-content"><span>Item #</span>11</div>
                            </div>
                            <div class="board-item">
                              <div class="board-item-content"><span>Item #</span>12</div>
                            </div>
                            <div class="board-item">
                              <div class="board-item-content"><span>Item #</span>13</div>
                            </div>
                            <div class="board-item">
                              <div class="board-item-content"><span>Item #</span>14</div>
                            </div>
                            <div class="board-item">
                              <div class="board-item-content"><span>Item #</span>15</div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>

          </div>
        </div>
      </div>
      <!-- /Container -->
      <!-- Footer -->
      <div th:replace="fragments/layout-footer::footer"></div>
      <!-- /Footer -->
    </div>
    <!-- /Main Content -->

  </div>
  <!-- /HK Wrapper -->


  <script src='https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js'></script>
  <script src='https://cdn.jsdelivr.net/gh/haltu/muuri@0.9.3/dist/muuri.min.js'></script>



</body>

</html>

im using this codepen as resource: https://codepen.io/niklasramo/pen/zPVBLq

the muury docs are on: https://github.com/haltu/muuri



from Jquery drag and drop with Muuri
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)