ドラッグドロップできるグリッド行列

 要素をドラッグドロップできるHTML5 APIを使って作った.まずそのAPI部分から.

<script>
const allowDrop = (ev) => {
    ev.preventDefault();
}
const drag = (ev) => {
    ev.dataTransfer.setData("text", ev.target.id);
}
const drop = (ev) => {
    ev.preventDefault();
    let id = ev.dataTransfer.getData("text"); 
    ev.target.appendChild(document.getElementById(id));
}
</script>  

 関数を3つ用意した.dataTransfersetData/getDataを利用した.
 ※jQueryが必要です.
 続いてCSS部分.

<style>
#room, #ground{
    width: 400px;
    height: 200px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 100px);
    grid-template-rows: repeat(auto-fill, 100px);
}
.seat{
    width: 100px;
    height: 100px;
    background: #aaa;
}
.child{
    width: 100px;
    height: 100px;
    background: skyblue;
}
</style>

 グレーのseatに空色のchildが次々座れる.roomの範囲内ならseatがないところにも座れる.
 最後にHTML部分.

<body>
    <div id="room" ondrop="drop(event)" ondragover="allowDrop(event)">
        <div id="seat1" class="seat" draggable="true"></div>
        <div id="seat2" class="seat" draggable="true"></div>
        <div id="seat3" class="seat" draggable="true"></div>
        <div id="seat4" class="seat" draggable="true"></div>
        <div id="seat5" class="seat" draggable="true"></div>
        <div id="seat6" class="seat" draggable="true"></div>
    </div>
    <div id="ground" ondrop="drop(event)" ondragover="allowDrop(event)">
        <div id="child1" class="child" draggable="true" ondragstart="drag(event)"></div>
        <div id="child2" class="child" draggable="true" ondragstart="drag(event)"></div>
        <div id="child3" class="child" draggable="true" ondragstart="drag(event)"></div>
        <div id="child4" class="child" draggable="true" ondragstart="drag(event)"></div>
        <div id="child5" class="child" draggable="true" ondragstart="drag(event)"></div>
        <div id="child6" class="child" draggable="true" ondragstart="drag(event)"></div>
    </div>
</body>

 動作は下のようになる.


    

 groundondropイベントとondragoverイベントを書くことで,childを戻せるようになっている.

 このプログラムは座席表や予定表などで使いたくて作った.ぜひ取り入れてみてください.