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

Posted on by IKIX_wbdv

　要素をドラッグドロップできる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つ用意した．dataTransferやsetData/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>

　動作は下のようになる．

　groundにondropイベントとondragoverイベントを書くことで，childを戻せるようになっている．

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