シンプルなドラッグ効果を実現するjs

この記事では、簡単なドラッグ効果を実現するためのjsの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

1. ドラッグの基本的な効果

アイデア:

マウスがボックス上で押されると、移動の準備が整います（イベントがオブジェクトに追加されます）

マウスが動くと、ボックスはマウスに追従します（イベントがページに追加されます）

マウスを離すと、ボックスの動きが止まります（イベントがページに追加されます）

var o = document.querySelector('div');
 
        //マウスダウン o.onmousedown = function (e) {
            //ボックスに対するマウスの位置 var offsetX = e.clientX - o.offsetLeft;
            var offsetY = e.clientY - o.offsetTop;
            //マウスの移動 document.onmousemove = function (e) {
                o.style.left = e.clientX - offsetX + "px";
                o.style.top = e.clientY - offsetY + "px";
            }
            //マウスアップ document.onmouseup = function () {
                ドキュメント.onmousemove = null;
                ドキュメント.onmouseup = null;
            }
        }

2. ドラッグアンドドロップの問題

ブラウザのデフォルトの動作（テキストと画像はドラッグ可能）により、ボックスにテキストが表示されたり、ボックス自体が画像である場合は、 return false を設定してデフォルトの動作を回避できます。ただし、このデフォルトの動作のインターセプトは、IE の下位バージョンには適用できません。グローバルキャプチャを使用して IE の問題を解決できます。

グローバルキャプチャ

グローバルキャプチャは、IE の下位バージョンにのみ適用されます。

<button>btn1</button>
    <button>btn2</button>
    <スクリプト>
        var bts = document.querySelectorAll('ボタン')
 
        bts[0].onclick = 関数（）{
            コンソールログ(1);
        }
        bts[1].onclick = 関数（）{
            コンソールログ(2);
        }
 
        // bts[0].setCapture() //グローバルキャプチャを追加 // bts[0].releaseCapture() ; //グローバルキャプチャを解除</script>

指定されたノードにグローバルキャプチャが追加されると、ページ上の他の要素は同じタイプのイベントをトリガーしなくなります。

3. ドラッグアンドドロップのフルバージョン

var o = document.querySelector('div');
 
        //マウスダウン o.onmousedown = function (e) {
            if (o.setCapture) { //IE 下位バージョン o.setCapture()
            }
            e = e || ウィンドウイベント
            //ボックスに対するマウスの位置 var offsetX = e.clientX - o.offsetLeft;
            var offsetY = e.clientY - o.offsetTop;
            //マウスの移動 document.onmousemove = function (e) {
                e = e || ウィンドウイベント
                o.style.left = e.clientX - offsetX + "px";
                o.style.top = e.clientY - offsetY + "px";
            }
            //マウスアップ document.onmouseup = function () {
                ドキュメント.onmousemove = null;
                ドキュメント.onmouseup = null;
                o.releaseCaptureの場合{
                    o.releaseCapture(); //グローバルキャプチャを解放する}
            }
            return false; //標準ブラウザのデフォルトの動作}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: