マウスのイベントでドラッグを実行します.

まずマウスのイベントを復習します.
click:ユーザーがメインマウスボタンをクリックするか、リターンボタンを押すとトリガします.mousedown:ユーザが任意のマウスボタンを押した時にトリガし、キーボードでトリガできません.mouseenter:マウスカーソルが元素の外側から元素の範囲内に初めて移動するときにトリガします.mouseleave:マウスカーソルが要素範囲外に移動した時にmousemooveを起動します.マウスポインタが要素内を移動した時に繰り返しトリガします.キーボードイベントを通じてこのイベントを起動できません.mouseout:マウスポインタが要素の上にあり、ユーザーが他の要素に移動するときにトリガします.また、他の要素に移動すると、前の要素の外部に位置することもあり、この要素のサブ要素であることもあり得る.mouseover:マウスポインタが一つの要素の外側にあるときに、他の要素の境界内に最初に移動したときにトリガします.mouseup:ユーザがマウスボタンを放した時にトリガする
同じ要素でmousedownとmouseupイベントが相次いでトリガされた場合のみ、clickイベントが発生します.
mousedownとmouseupを使って、mousemooveイベントをドラッグします.
html構造:移動divを定義する

<div id="div1">div>

スタイルを簡単に書きます.位置合わせに注意してください.

#div1{
            position: absolute;
            width: 200px;
            height: 200px;
            background: pink;
        }

jsコード:

window.onload = function(){
        var moveBox = document.getElementById('div1');
        var windowH = window.innerHeight,
            windowW = window.innerWidth;
        //     moveBox     
        moveBox.onmousedown = function(event){
            event = event || window.event;
            var distanceX = event.clientX - this.offsetLeft,
                distanceY = event.clientY - this.offsetTop;
            //     document     ，        
            document.onmousemove = function(event_2){
                event_2 = event_2 || window.event;
                var left = event_2.clientX - distanceX,
                    top = event_2.clientY - distanceY;
                if (left < 0) left = 0;
                if (top < 0) top = 0;
                if (left > windowW - moveBox.offsetWidth) left = windowW - moveBox.offsetWidth;
                if (top > windowH - moveBox.offsetHeight) top = windowH - moveBox.offsetHeight;
                moveBox.style.left = left + 'px';
                moveBox.style.top = top + 'px'
            //       ,        ；
            document.onmouseup = function(){
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
      }
    }