javascript - 使用 Muuri 进行 Jquery 拖放
问题描述
我想做一个操作流程的创建者。我需要有一个带有操作的左侧列，并且我需要拖动到可以在 html 中或由新列按钮生成的右侧列。
我有一些我不知道该怎么做的解决方法。
- 操作列（左侧）不能“丢失”其被拖到其他列的项目。
- 左侧列不接收从另一列拖动的任何对象。
这是我的代码，只是第一项做得很差。当将某个项目拖到另一个 collun 时，该项目不会调整到布局。
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>我使用这个codepen作为资源： https ://codepen.io/niklasramo/pen/zPVBLq
muury 文档在： https ://github.com/haltu/muuri
解决方案
推荐阅读
- c# - 具有包含和不包含列表 C# 的元组
- c - 带有 gcc 的 makefile 返回致命错误：没有输入文件
- bash - Makefile：将警告计数存储到变量中而不使用临时文件
- python - 如何从网站下载嵌套标签中的图像
- javascript - 在 P5.js 中将周长设置为循环线的边界
- ruby-on-rails - 关于将选项传递给特征的工厂女孩语法的问题
- c++ - 我正在尝试为我的程序执行搜索功能以从我的文本文件中搜索记录
- python - Python：带有线程的 PubSub 和 WxPython 是否需要 wx.CallAfter？
- javascript - 如何停止 if 语句
- api - 如何在应用程序洞察资源之前部署 APIManagement Service Logger？