jquery实现div拖拽效果_第1页
jquery实现div拖拽效果_第2页
jquery实现div拖拽效果_第3页
jquery实现div拖拽效果_第4页
jquery实现div拖拽效果_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、jquery实现div拖拽效果/index.html<!DOCTYPEhtmlPUBLIC"-/W3C/DTDXHTML1.0Transitional/EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;ch

2、arset=utf-8"/><title>移动div</title><scriptsrc="jslib/jquery.js"type="text/javascript"></script><scriptsrc="jslib/movediv.js"type="text/javascript"></script><linkhref="css/index.css"type="text/css&quo

3、t;rel="stylesheet"/></head><body><divid="alpha"></div><divid="m_div"><divid="m_div_title"><spanstyle="margin-right:300px">我想对你说</span><spanstyle="background-color:#FFFFFF;color:#000000;cursor

4、:pointer;"><ahref="javascript:void(0)"onclick="hide()">X</a></span></div><divid="m_div_cont"align="center"><form><table><tr><td><textareacols="40"rows="8"></textarea>

5、</td></tr><tr><td><inputtype="submit"value="发送"/></td></tr></table></form></div></div>显示对话框</a><center><ahref="javascript:void(0)"onclick="show()"></center></body>&

6、lt;/html>/JavaScriptmovediv.js/鼠标拖拽div效果$(document).ready(function()varfx;varfy;varflag=false;varalpha=$("#alpha");vartitle=$("#m_div_title");varm_div=$("#m_div");m_div.mousemove(function(event)if(flag)varmyEvent=event|window.event;JchangeXY(m_div,myEvent););m_div.mo

7、useup(function()title.unbind("mousemove");flag=false;);alpha.css("width",$(window).width();alpha.css("height",$(window).height();alpha.mousemove(function(event)if(flag)varmyEvent=event|window.event;JchangeXY(m_div,myEvent););alpha.mouseup(function()title.unbind("mo

8、usemove");flag=false;);title.mousedown(function(event)vart=$(this);varmyEvent=event|window.event;fx=myEvent.clientX;fy=myEvent.clientY;t.mousemove(function(event)varmyEvent=event|window.event;changeXY(m_div,myEvent);flag=true;);)functionchangeXY(m_div,myEvent)if(fx>myEvent.clientX)varchange_

9、top_x=parseInt(m_div.css("left")-(fx-myEvent.clientX);/测试是否超出左边窗口if(change_top_x<5)change_top_x=5;/flag=false;/title.unbind("mousemove");m_div.css("left",change_top_x+"px");fx=myEvent.clientX;if(fx<myEvent.clientX)varchange_top_x=parseInt(m_div.css("

10、;left")+(myEvent.clientX-fx);/测试是否超出窗口右边if(change_top_x>($(window).width()-parseInt(m_div.css("width")-5)change_top_x=($(window).width()-parseInt(m_div.css("width")-5);/flag=false;/title.unbind("mousemove");m_div.css("left",change_top_x+"px")

11、;fx=myEvent.clientX;if(fy>myEvent.clientY)varchange_top_y=parseInt(m_div.css("top")-(fy-myEvent.clientY)/测试是否超出窗口顶部if(change_top_y<5)change_top_y=5;/flag=false;/title.unbind("mousemove");m_div.css("top",change_top_y+"px");fy=myEvent.clientY;if(fy<myEv

12、ent.clientY)varchange_top_y=parseInt(m_div.css("top")+(myEvent.clientY-fy);/测试是否超出窗口底部if(change_top_y>($(window).height()-parseInt(m_div.css("height")-5)change_top_y=($(window).height()-parseInt(m_div.css("height")-5);/flag=false;/title.unbind("mousemove");

13、m_div.css("top",change_top_y+"px");fy=myEvent.clientY;title.mouseup(function()title.unbind("mousemove");flag=false;)title.mouseout(function()title.unbind("mousemove"););functionshow()varalpha=$("#alpha");alpha.show();varm_div=$("#m_div");m_

14、div.slideDown("slow");functionhide()varm_div=$("#m_div");m_div.slideUp("slow");varalpha=$("#alpha");alpha.hide();/*CSSDocumentindex.cssbodybackground:url(./img/_000.jpg)no-repeatcenter;#m_divborder:1pxsolid#000000;width:400px;height:250px;position:absolute;top:300px;left:400px;background-c

人人文库> 全部分类> 行业资料 > 管理策划

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论