jQuery实现的简单拖拽功能示例

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

！doctype html html lang=' en ' hearta charset=' UTF-8 '标题拖拽/title style * { padd : 0；保证金： 0；} div { width: 100px高度： 100像素；背景技术# f00cursor:指针；绝对位置：左： 0；top : 0；}/style/head dydiv/div脚本src=' http : jquery。js//script script $(function(){//移动窗口的步骤//1、按下鼠标左键//2、移动鼠标$(“div”).鼠标向下(函数(e){//e . pagex var positionDiv=$(this).offset()；var distenceX=e . pagex-positiondiv。向左；var distenceY=e . pagey-position div。顶部；//alert(distenceX)//alert(positiondiv。左)；$(文档)。鼠标移动(函数{ var x=e . pagex-distenceX；var y=e . Pagey-distenceY；if(x0){ x=0；}else if(x$(文档)。width()-$(“div”).outwidth(true)){ x=$(文档)。width()-$(“div”).外部宽度（真);} if(y0){ y=0；}else if(y$(文档)。高度()-$(“div”).outhealth(true)){ y=$(文档)。高度()-$(“div”).外部高度（真);} $(“div”).css({ 'left':x 'px '，' top ' :y ' px ' })；});$(文档)。mouseup(function(){ $(document)).关闭(“鼠标移动”)；});});});/脚本/正文/html效果图如下：

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

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