jquery实现div拖拽效果

1、jquery实现div拖拽效果/index.html移动divspanstyle二margin-right:300px我想对你说X/a/span/divdivid=m_div_contalign=centerformtabletr显示对话框/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)i

2、f(flag)varmyEvent=event|window.event;7changeXY(m_div,myEvent););m_div.mouseup(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;7changeXY(m_div,myEvent););alpha.mou

3、seup(function()title.unbind(mousemove);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(fxmyEven

4、t.clientX)varchange_top_x=parseInt(m_div.css(left)-(fx-myEvent.clientX);/测试是否超出左边窗口if(change_top_x5)change_top_x=5;/flag=false;/title.unbind(mousemove);m_div.css(left,change_top_x+px);fx=myEvent.clientX;if(fx($(window).width()-parseInt(m_div.css(width)-5)change_top_x=($(window).width()-parseInt(m_di

5、v.css(width)-5);/flag=false;/title.unbind(mousemove);m_div.css(left,change_top_x+px);fx=myEvent.clientX;if(fymyEvent.clientY)varchange_top_y=parseInt(m_div.css(top)-(fy-myEvent.clientY)/测试是否超出窗口顶部if(change_top_y5)change_top_y=5;/flag=false;/title.unbind(mousemove);m_div.css(top,change_top_y+px);fy=m

6、yEvent.clientY;if(fy($(window).height()-parseInt(m_div.css(height)-5)change_top_y=($(window).height()-parseInt(m_div.css(height)-5);/flag=false;/title.unbind(mousemove);m_div.css(top,change_top_y+px);fy=myEvent.clientY;title.mouseup(function()title.unbind(mousemove);flag=false;)title.mouseout(functi

7、on()title.unbind(mousemove););functionshow()varalpha=$(#alpha);alpha.show();varm_div=$(#m_div);m_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-color:#FFFFFF;display:none;#m_div_titlebackground:#0000FF;height:25px;color:#FFFFFF;cursor:crosshair#al