效果图：

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题可拖拽特效/title style type=' text/CSS ' * { margin : 0；padd : 0；} .标题{宽度：100%；高度：30 px背景技术： # 036663;线高：30 pxcolor : # ffft ext-缩进：30 px} #演示{ width:400px高度：300 pxborder : solid 5px # eee box-shadow :0 0 5px # 666；位置：绝对；前：40%；左侧：40%;} # innerht { height:25px背景技术： # 036663;边框-底部：实心1px # 369color : # ffft ext-缩进：10 px光标：移动} #关闭{浮动：右光标：指针指针；}/style/head dydiv class=' header '注册信息/divdiv id='demo' div id='innerht '注册信息（可拖拽)span id='close '【关闭】/span/div div class=' write '/div/div/body script type=' text/JavaScript '(函数(window){ function $(id){ return document。getelementbyid(id)；};//获取对象var innerht=$('innerht ')，demo=$('demo ')，close=$(' close ')；//给内部绑定鼠标事件内心深处。onmousedown=function(event){//解决事件兼容问题var事件=事件| | window.event//获取鼠标在页面上坐标var pageX=事件。pageX | |事件。客户端x文档。文档元素。被偷窃；var pageY=事件。pageY | |活动。客户文件。文档元素。滚动顶部；//获取鼠标在内部内部的坐标var innerX=pageX-demo。offsetleftvar innerY=pageY-demo。偏移顶部；//给文件绑定鼠标移动事件，防止鼠标快速滑动时滑出内部文档。onmousemove=function(event){ var event=event | | window。事件；//获取鼠标移动时的坐标var moveX=事件。pagex | |事件。客户端x文档。文档元素。被偷窃；var moveY=事件。佩吉| |事件。客户文件。文档元素。滚动顶部；//鼠标移动时演示的位置坐标var DeMox=moveX-innerX；var Demoy=moveY-innerY；//鼠标移动时演示的位置坐标演示。风格。left=DeMox ' px演示。风格。top=DeMoy ' px//清除选中文字window.getSelection？window.getSelection().removeAllRanges():文档。选择。empty()；} };//鼠标抬起清除拖拽效果文件。onmouseup=function(){ document。onmousemove=null};//点击关闭按钮关闭跟随框很接近。onclick=function(){ this。父节点。父节点。风格。显示='无'；};})(窗口)/脚本/html以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！