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

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

1.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;
            }
}

1.2 ドラッグアンドドロップの問題

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

1.2.1 グローバルキャプチャ

グローバルキャプチャは、下位バージョンの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>

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

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

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; //標準ブラウザのデフォルトの動作}

1.3 境界線をドラッグする

可視領域の幅:

表示可能領域の高さ:

//画面の高さ// var h=document.documentElement.clientHeight
// var w = document.documentElement.clientWidth;


// コンソールログ(h,w);

分析:

最大左: 表示領域の幅 - ボックスの幅

残り最小値: 0

最小トップ: 0

最大上端: 表示領域の高さ - ボックスの高さ

1.4 衝突

衝突の鍵は臨界値を見つけることです。

2 つのオブジェクトの 4 つの側面の名前を答えてください: L1、T1、R1、B1 および L2、T2、R2、B2

L1 > R2 || T1 > B2 || R1 < L2 || B1 < T2 の場合、衝突は発生しません。

<div class="one">

    </div>
    <div class="two"></div>
    <スクリプト>
        var o = document.querySelector('.one');
        var ox = document.querySelector('.two');

        //マウスダウン o.onmousedown = function (e) {
            if (o.setCapture) { //IE 下位バージョン o.setCapture()
            }
            e = e || ウィンドウイベント
            //ボックスに対するマウスの位置 var offsetX = e.clientX - o.offsetLeft;
            var offsetY = e.clientY - o.offsetTop;
            //左と上の最大余白（境界線）を計算します
            var maxLeft = document.documentElement.clientWidth - this.offsetWidth;
            var maxTop = document.documentElement.clientHeight - this.offsetHeight;
            //衝突 var L2 = ox.offsetLeft;
            var T2 = ox.offsetTop;
            var R2 = L2 + ox.offsetWidth;
            var B2 = T2 + ox.offsetHeight
            //マウスの移動 document.onmousemove = function (e) {
                e = e || ウィンドウイベント
                var x = e.clientX - offsetX;
                var y = e.clientY - offsetY;

                //境界を計算する if (x <= 0) x = 0
                y <= 0 の場合、y = 0
                x >= maxLeft の場合、x = maxLeft;
                y >= maxTop の場合、y = maxTop;

                o.style.left = x + "px";
                o.style.top = y + "px";
                //衝突を計算する var L1 = o.offsetLeft;
                var T1 = o.offsetTop;
                var R1 = L1 + o.offsetWidth;
                var B1 = T1 + o.offsetHeight;
                if (L1 > R2 || T1 > B2 || R1 < L2 || B1 < T2) { // 衝突なし ox.style.backgroundColor = "blue"
                } それ以外 {
                    ox.style.backgroundColor = "オレンジ"
                }
            }
            //マウスアップ document.onmouseup = function () {
                ドキュメント.onmousemove = null;
                ドキュメント.onmouseup = null;
                o.releaseCaptureの場合{
                    o.releaseCapture(); //グローバルキャプチャを解放する}
            }
            return false; //標準ブラウザのデフォルトの動作}

</スクリプト>

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

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