- 投稿日
- 2022年7月20日
ソート
html
最後の<li> </li>必要です。
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<form id="formsort">
<ul id="sort_ul">
<li id="row1" draggable="true">
<span class="handle"><input type="hidden" name="id[]" value="1" /></span>
<span>111</span>
</li>
<li id="row2" draggable="true">
<span class="handle"><input type="hidden" name="id[]" value="2" /></span>
<span>222</span>
</li>
<li id="row3" draggable="true">
<span class="handle"><input type="hidden" name="id[]" value="3" /></span>
<span>333</span>
</li>
<li id="row4" draggable="true">
<span class="handle"><input type="hidden" name="id[]" value="4" /></span>
<span>444</span>
</li>
<li> </li>
</ul>
</form>
<script src="./script.js"></script>
</body>
</html>
CSS
css
ul#sort_ul {
box-sizing: border-box;
list-style: none;
margin: 0;
padding: 0;
}
ul#sort_ul > li {
display: table;
width: 500px;
margin: 0;
padding: 0;
background-color: #fff;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
vertical-align: middle;
text-align: left;
}
ul#sort_ul > li:hover,
ul#sort_ul > li:active {
background-color: #f8ffbe;
}
ul#sort_ul > li span {
box-sizing: border-box;
display: table-cell;
height: 30px;
margin: 0;
padding: 0;
font-size: 14px;
line-height: 30px;
}
ul#sort_ul > li span.handle {
width: 28px;
background-image: url(icon_handle.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 8px 13px;
cursor: grab;
}
ul#sort_ul > li span.handle:active {
cursor: grabbing;
}
ul#sort_ul > li:last-child {
border-top: 1px solid #ccc;
border-right: none;
border-left: none;
}
ul#sort_ul > li:last-child,
ul#sort_ul > li:last-child:hover,
ul#sort_ul > li:last-child:active {
background: none;
}
Javascript
Javascript
'use strict';
document.querySelectorAll('#sort_ul > li').forEach (elm => {
elm.ondragstart = function(event) {
event.dataTransfer.setData('text/plain', event.target.id);
};
elm.ondragover = function(event) {
event.preventDefault();
this.style.borderTop = '2px solid #00f';
};
elm.ondragleave = function() {
this.style.borderTop = '';
};
elm.ondrop = function(event) {
event.preventDefault();
let id = event.dataTransfer.getData('text/plain');
let elm_drag = document.getElementById(id);
this.parentNode.insertBefore(elm_drag, this);
this.style.borderTop = '';
// DB
(async () => {
const form = document.getElementById('formsort');
const fd = new FormData(form);
const response = await fetch('./post/', {
method: 'POST',
body: fd
});
if (200 === response.status) {
const json = await response.json();
console.log(json);
}
})();
};
});