C:blanc
投稿日
2022年7月20日
Tips JavaScript

ソート

html

最後の<li>&#160;</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>&#160;</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);
            }
        })();

    };
});

DEMO