拖拽元素实现

拖拽元素实现关键在于给元素设置定位，给元素设置 left 以及 top 值实现移动

这里需要知道以下几个dom属性
window.innerWidth : 浏览器窗口的可见宽度
window.innerHeight : 浏览器窗口的可见高度
offsetWidth: 返回元素的宽
offsetHeight：返回元素的高
offsetLeft: 元素左边缘距离浏览器左边缘的距离
offsetTop: 元素上边缘距离浏览器上边缘的距离
clientX: 鼠标横坐标
clientY: 鼠标纵坐标
用到的鼠标事件：
onmousedown: 鼠标按下触发
onmousemove: 鼠标移动触发
onmouseup:鼠标释放触发
思路：
1、鼠标按下触发事件，获取鼠标按下原点坐标，计算鼠标按下的位置距离元素的左边和上边的距离，
2、在鼠标按下的事件里面设置鼠标移动事件，其对象应该是document，在整个网页内移动。再获取鼠标坐标减去鼠标在元素内的位置距离，以保证鼠标移动之后原点在鼠标按下时的位置。将其赋值给left和top，由于设置了定位，元素跟着鼠标移动就实现了。最后限制元素最大的left和top，使其不能超出浏览器可视区域。
3、鼠标释放时，利用null清除鼠标移动事件

        * {
   
            margin: 0;
            padding: 0;
        }
        div {
   
            width: 200px;
            height: