JavaScriptでタッチイベントを使いドラッグアンドドロップを実現する最小サンプル

2019/05/25
(この記事の文字数: 272)

自作WebツールのドラッグアンドドロップがPC版にしか対応しておらず、スマホ対応したいなと思い、ひとまず JavaScript でタッチイベント(touchstart、touchmove、touchend)を使ってスマホでのドラッグアンドドロップを実現する最小サンプルを作りましたので掲載します。

以下の茶色ボックスをタッチ操作によるドラッグアンドドロップで２つのセル間を移動することができます。(PCのマウスからのドラッグはできないので注意)

以下がソースコードです。コピペすれば動作するかと思います。解説はソースコード中のコメントを読んでください。


<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div style="text-align:center">
    <table border="1" align="center">
        <tr>
            <td class="droppable-elem" style="width:150px;height:100px;">
                <div class="draggable-elem" style="margin:auto; width:60px;height:60px;background-color: brown">
                </div>
            </td>
            <td class="droppable-elem" style="width:150px;height:100px"></td>
        </tr>
    </table>

    <script>
        function touchStartEvent(event) {
            // タッチによる画面スクロールを止める
            event.preventDefault();
        }

        function touchMoveEvent(event) {
            event.preventDefault();

            // ドラッグ中のアイテムをカーソルの位置に追従
            var draggedElem = event.target;
            var touch = event.changedTouches[0];
            event.target.style.position = "fixed";
            event.target.style.top = (touch.pageY - window.pageYOffset - draggedElem.offsetHeight / 2) + "px";
            event.target.style.left = (touch.pageX - window.pageXOffset - draggedElem.offsetWidth / 2) + "px";
        }

        function touchEndEvent(event) {
            event.preventDefault();

            // ドラッグ中の操作のために変更していたスタイルを元に戻す
            var droppedElem = event.target;
            droppedElem.style.position = "";
            event.target.style.top = "";
            event.target.style.left = "";

            // ドロップした位置にあるドロップ可能なエレメントに親子付けする
            var touch = event.changedTouches[0];
            // スクロール分を加味した座標に存在するエレメントを新しい親とする
            var newParentElem = document.elementFromPoint(touch.pageX - window.pageXOffset, touch.pageY - window.pageYOffset);
            if (newParentElem.className == "droppable-elem") {
                newParentElem.appendChild(droppedElem);
            }
        }

        {
            // ドラッグ可能アイテムへのタッチイベントの設定
            var draggableItems = $(".draggable-elem");
            for (var i = 0; i < draggableItems.length; ++i) {
                var item = draggableItems[i];
                item.addEventListener('touchstart', touchStartEvent, false);
                item.addEventListener('touchmove', touchMoveEvent, false);
                item.addEventListener('touchend', touchEndEvent, false);
            }
        }
    </script>
</div>