最简单的原生js拖拽

首先是排版，只有一个色块。

再CSS中给盒子加上定位

 * {
            margin: 0;
            padding: 0;
}
   #box {
            position: fixed;
            width: 100px;
            height: 100px;
            background: #000;
   }

html部分只有一个div

 <div id="box"></div>

js实现思路：
1.获取在盒子内鼠标点击的位置。
盒子内的位置 = 当前鼠标点击的x,y轴的位置 - 盒子的left,top值。
2.开始移动。
按下之后需要在当前窗口移动，移动的x,y轴坐标 = 当前window按下的x,y位置 - 鼠标在盒子的位置
3.鼠标抬起清除事件。
当鼠标抬起的时候，把移动事件变为null即可清空。

        box.onmousedown = function (e) {
            var x = e.x - this.offsetLeft
            var y = e.y - this.offsetTop
            that = this
            window.onmousemove = function (e) {
                var top = e.y - y
                var left = e.x - x
                that.style.left = left + "px"
                that.style.top = top + "px"
            }
        }
        box.onmouseup = function () {
            window.onmousemove = null
        }