Дано:
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<table>
<tr>
<th>№ п/п</th>
<th>ФИО</th>
<th>Задача</th>
<th>Дата</th>
</tr>
</table>
<script>
</script>
</body>
</html>
Найти:
Сформировать таблицу на основе данных (условно data - это данные из БД). Оформление и стили по желанию. Главная задача - сделать возможность перемещения строк, то есть чтобы пользователь мог перетаскивать задачи в любое место таблицы.
Важно помнить, что при открытии страницы, данные из БД берутся каждый раз заново, соответственно надо вносить изменения в data
Решение:
https://codepen.io/Totdev/pen/PoobypG
body {
font-family: sans-serif;
}
table, tbody {
border-collapse: collapse;
position: relative;
}
th, td {
padding: 10px 15px;
text-align: left;
border: 3px solid lightgrey;
}
th:last-of-type {
text-align: right;
}
tbody tr:first-child:hover {
border: none;
}
tbody tr:hover td {
}
tbody tr:hover {
border: 4px solid crimson;
cursor: grab;
}
JS:
const data = [{
'id': 1,
'npp': 1,
'user': 'Иван Петров',
'task': 'Отправить письмо заказчику',
'date': '01-11-2019'
},
{
'id': 2,
'npp': 2,
'user': 'Петр Иванов',
'task': 'Получить оплату по проекту',
'date': '03-11-2019'
},
{
'id': 3,
'npp': 3,
'user': 'Василий Сергеев',
'task': 'Согласовать стадию П',
'date': '01-11-2019'
},
{
'id': 4,
'npp': 4,
'user': 'Иван Петров',
'task': 'Дать ответ на письмо',
'date': '03-11-2019'
},
{
'id': 5,
'npp': 5,
'user': 'Петр Иванов',
'task': 'Выдать зарплату',
'date': '10-11-2019'
}
];
function onDragStart(event) {
event.dataTransfer.dropEffect = "move";
event
.dataTransfer
.setData('text/plain', event.target.id);
event
.currentTarget
.style
.backgroundColor = 'pink';
}
function onDrop(event) {
const id = event
.dataTransfer
.getData('text');
toste
const draggableElement = document.getElementById(id);
const dropzone = event.target;
dropzone.appendChild(draggableElement);
event
.dataTransfer
.clearData()
.backgroundColor = 'white';
}
function onDragOver(event) {
event.preventDefault();
console.log(event.target)
}
class Table {
constructor(data) {
this.data = data;
}
renderTable = () => {
return this.data.forEach((tableRow) => {
const tr = document.createElement("tr")
const tbody = document.querySelector("tbody")
tbody.setAttribute("ondragover", 'onDragOver(event);')
tbody.setAttribute("ondrop", 'onDrop(event);')
const tableCols = Object.keys(tableRow)
tr.id = tableRow[tableCols[0]]
tr.setAttribute("draggable", true)
tr.setAttribute("ondragstart", "onDragStart(event);")
const getColumns = () => {
tableCols.forEach((tableCell) => {
if (tableCell !== 'id') {
const td = document.createElement("td")
td.innerHTML = `${tableRow[tableCell]}`
tr.appendChild(td)
}
})
}
getColumns()
// console.log('b', getColumns())
tbody.appendChild(tr)
})
}
}
new Table(data).renderTable()
