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

！doctype html html head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8 '/title www . JB 51 . net Jquery拖拽/title style type=' text/CSS ' # box {位置：固定；left:100pxtop:100px背景色：红色；宽度宽度：300像素高度：200 px} # out { height :2000 px }/style script src=' http :http://libs。百度。com/jquery/2。0 .3/jquery。量滴js '/script脚本$(文档)。ready(function(){ var drawing=false；var offX，OfY，mouseX，mouseY，winX，winY，x，y；$('#box ').鼠标向下(函数（事件){事件。stopperpagation()；起草=真；});$(文档)。鼠标移动(函数（事件){事件。stopperpagation()；var e=event | | window . eventmousex=e . pagex | | e . clientx $(文档)。scrolleft()；mouseY=e.pageY||e.clientY $(文档)。滚动顶部()；winX=$('#box ').偏移量()。左-$(文档)。scrolleft()；winY=$('#box ').偏移量()。top-$(文档)。滚动顶部()；if(drawing==false){ OFx=MouseX-WinX；OfY=Mousey-WinY；} x=MouseX-OFx；y=Mousey-of Yy；$('#box ').css({'left':x，' top ' :y })；});$(文档)。鼠标向上(功能(事件){事件。stopperpagation()；起草=假；});});/script/head body div id=' box '/div div id=' out '/div/body/html这里使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun，可得到如下测试效果：

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

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