JavaScriptでタッチイベントを使いドラッグアンドドロップを実現する最小サンプル
ロゴ
「Web 開発」に関連する記事一覧

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

2019/05/25
jQuery JavaScript HTML 
記事のヘッダー画像

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

以下の茶色ボックスをタッチ操作によるドラッグアンドドロップで2つのセル間を移動することができます。(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>


  このエントリーをはてなブックマークに追加    

<<「Web 開発」の記事一覧に戻る

関連記事

にほんブログ村 ゲームブログ ファイアーエムブレムへ にほんブログ村 デザインブログ コンピュータグラフィックスへ

0.0595 sec
Copyright(C)2006-2019 puarts All Rights Reserved