基于Java脚本语言实现窗口拖动效果

写法类似于上一篇，水平进度条拖拽，具体内容如下

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题文档/标题样式* { margin : 0；padd : 0；} .nav { width : 100%；高度： 20像素背景色： # CCC} .弹出{ width : 300 pxhire : 300 pxborder : 1px纯红；绝对位置：左侧： 50%;前：名50%；边距-左侧：-150像素；边距-top :-150 px；} .弹出菜单标题{ height: 20px宽度： 100%;背景：深粉色；光标：移动；} /style /headbody div class='nav '注册信息/div class=' popup ' id=' popup父亲' div class=' title ' id=' popup儿子'我是窗口标题，可拖着我走/div div class='content '我是窗口内容/div /div脚本var popup first=文档。getelementbyid(' popup first ')；var popup son=文档。getelementbyid(' popup son ')；弹出儿子。onmousedown=function(event){ var event=event | | window。事件；变量=这个；var x=事件。client x-首先弹出。offset left-150；//当前鼠标点击处相对于人民父亲所在位置x，-150是处理边缘值var y=事件。client-popup优先。偏移顶部-150；//当前鼠标点击处相对于人民父亲所在位置y文档。onmousemove=function(event){ var event=event | | window。事件；弹出式父亲。风格。左=事件。客户端x-x ' px弹出式父亲。风格。top=事件。client y-y ' px；window.getSelection？window.getSelection().removeAllRanges():文档。选择。empty()；} }文档。onmouseup=function(){ document。onmousemove=null}/脚本/正文/html效果图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。