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

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

<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>

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

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


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

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