jQuery Muuri 拖动列和项目

问题描述

我正在使用 muuri 制作像 Trello 板一样的专栏。我需要做两件事：

添加新列时水平滚动
能够将任何项目从另一列拖到新列中。

有人可以帮我理解并制作这两个功能吗？

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 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);
});

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

function generateBoard(index) {
  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"></div></div></div></div>';
  itemElem.innerHTML = itemTemplate;
  return itemElem.firstChild;
}

$("#newCol").click(function() {
  var board = generateBoard(0);
  boardGrid.add([board]);
});

.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;
}

.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;
}

.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.2);
  box-shadow: 0px 1px 3px 0 rgba(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.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

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

<div class="hk-wrapper hk-alt-nav">
  <div th:replace="fragments/layout-navbar::navbar(userFullName=${user.firstName + ' ' + user.lastName})"></div>
  <div class="hk-pg-wrapper">
    <div class="container-fluid mt-xl-50 mt-sm-30 mt-15">
      <div class="row">
        <div class="col-xl-12">
          <section class="hk-sec-wrapper">
            <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">
                          <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">
                          <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">
                          <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>
    <div th:replace="fragments/layout-footer::footer"></div>
  </div>
</div>
<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/[email protected]/dist/muuri.min.js'></script>

编辑：我找到了一种方法来制作 colluns 的水平视图： css:

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

js：

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

o 只需要为新的 colluns 使内部 itens 可拖动。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

drag-and-drop jquery