HTML：实现鼠标拖拽，释放效果

第一部分body：

先定义一个块标签，例如div class="drag"

第二部分style：

自由书写其样式，不可或缺的属性position：absolute；

第三部分script：鼠标拖动元素移动，即元素的位置放上变化---坐标.

var drag=document.querySelector(".drag");//获取元素
//鼠标按下事件，获取起点位置信息
drag.onmousedown=function(e1){
  var x1=e1.clientX;//可显示出事件发生时鼠标指针的横坐标：
  var y1=e1.clientY;//可显示出事件发生时鼠标指针的纵坐标：
  var l1=this.offsetLeft;
  var t1=this.offsetTop;
//查找变量时有个就近原则  形参就是局部变量
//   鼠标移动事件，计算差值，drag重新定位
window.onmousemove=function(e2){
    var x2=e2.clientX;//移动旧的位置
    var y2=e2.clientY;
    var l2=l1+(x2-x1);//原来的位置加上移动的距离就是移动之后的位置(坐标)
    var t2=t1+(y2-y1);
    //边界处理 防止越界 （）优先级最高
  l2=l2<0?0:(l2>window.innerWidth-drag.offsetWidth?window.innerWidth-drag.offsetWidth:l2);
t2=t2<0?0:(t2>window.innerHeight-drag.offsetHeight?window.innerHeight-drag.offsetHeight:t2);
    drag.style.left=l2+'px';
    drag.style.top=t2+'px';
}
}
//当鼠标抬起时，去掉mousemove事件
drag.onmouseup=function(){
    window.onmousemove=null;
}