jQuery实现的简单对话框拖动功能示例

本文实例讲述了框架实现的简单对话框拖动功能。分享给大家供大家参考，具体如下：

！DOCTYPE html html hearteta charset=' utf-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge，chrome=1 ' title www .JB 51。net jquery拖动/title meta name=' description ' content=' meta name=' keyword ' content=' link href=' rel=' rel=' external no follow '样式表style * { margin : 0；padd : 0；盒子尺寸：边框盒子；-moz-用户-选择：无；}正文{ font : 12px/16px bold '微软雅黑，微软雅黑；} .drag container { width : 382 pxh three : 395 px绝对位置：前：名50%；左侧： 50%;border: 1px纯红；左边距：-191 px；边距-top :-197.5 px；} .dragContainer .拖动标题{宽度： 100%；高度： 35pxborder-底部： 1px纯红；文本对齐：中心；线高： 35px} .拖动容器。拖动标题：悬停{光标：移动；} .dragContainer .内容{宽度： 100%；height : 360 px } p . button GrouP { width : 100%；文本对齐：中心；绝对位置：底部： 0；左： 0；右： 0；padd : 5pxborder-top : 1px纯红；} p.buttonGroup输入{ padding: 5px 10pxcolor:白色；} p . button GrouP input :悬停{光标：指针；光标：手；} p . button GrouP input : first-child { margin-left : 25px；背景：蓝色；} p . button GrouP输入。BTN 2 {左边距： 15px背景：红色；}/style/head body div class=' drag container ' id=' drag ' style=' position : absolute；'p class='dragtitle '标题栏/p div class=' content '/div p class=' button group '输入类型=' button '值='确定输入类型='按钮'值='取消class='btn2'/p /div脚本src=' http :3358 cdn。bootscs。com/jquery/2。1 .0/jquery。js /脚本脚本类型=' text/JavaScript ' var my drag={鼠标点： { x :0，y:0}，//初始化坐标drag:函数(){ var=this//保存当前对象即(mydrag)，如果不保存，在mousedown()里访问不了mydrag这个对象var targetid=$(' .拖动标题')；targetid.mousedown(函数（事件){ var e=event var offsetLeft=target id . offset().向左；//当前差异的左偏移距离var offsetTop=targetid.offset().顶部；//当前差异的顶部偏移距离那个。MousePoint。x=e . ClientX-offsetLeft；//计算鼠标点击时离它自己差异的横向距离那个。鼠标点。y=e . client y-偏移顶部；//计算鼠标点击时离它自己差异的纵向距离$(文档)。bind('mousemove '，move)；e . stopperpagation()；});功能移动（事件){ var e=event var Left=e . client x-the。MousePoint。x；//移动后，重新计算左偏移和顶部偏移距离var Top=e . clienty-the。鼠标点。y；$(“# drag”).css({'top':Top，' left':Left，' margin ' :0 })；$(文档)。bind('mouseup '，end)；e . stopperpagation()；};函数结束（事件){ var e=event$(文档)。解除绑定(“mousemove”，move)；$(文档)。解除绑定(“mouseup”，end)；e . stopperpagation()；};} }我的男朋友。拖动()；/脚本/正文/html使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试，运行效果如下：

更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery拖拽特效与技巧总结》 、 《jQuery常用插件及用法总结》 、 《jquery中Ajax用法总结》 、 《jQuery表格(table)操作技巧汇总》 、 《jQuery扩展技巧总结》 、 《jQuery常见经典特效汇总》 、 《jQuery动画与特效用法总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。