jquery 拖动div

2024-11-17 技术教程

*jquery库去我的下载里面下载

===============================================================//监听事件与回显

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><title></title><scriptsrc="jquery-1.4.2.min.js"type="text/javascript"></script><scriptsrc="jquery-ui-1.8.16.custom.min.js"type="text/javascript"></script><scripttype="text/javascript">//监听事件与回显$(function(){$("#dragsource").draggable({create:function(event,ui){$("#div1").html("创建了");},start:function(event,ui){$("#div1").html("拖动了");},drag:function(event,ui){$("#div1").html("移动中");},stop:function(event,ui){$("#div1").html("停止了");},revert:"invalid",//拖动返回原来的位置cursor:"move"//拖动时的样式});//可拖动DIV$("#droppalbe").droppable({create:function(event,ui){$("#div2").html("创建了");},activate:function(event,ui){$("#div2").html("activeta");},//判断源div能不能落到目标div上（拖拽中）deactivate:function(event,ui){$("#div2").html("deactivate");},//判断源div能不能落到目标div上(拖拽停止)over:function(event,ui){$("#div3").html("进入容器");},out:function(event,ui){$("#div3").html("离开容器");},drop:function(event,ui){$("#div3").html("落到容器上了");}//和activate、deactivate有冲突});//容器});</script></head><body><divid="dragsource"><p>拽我!</p></div><divid="droppalbe"><p>Drophere</p></div><divid="div1"></div><divid="div2"></div><divid="div3"></div></body></html>

===============================================================//复制拖动(helper)

===============================================================//拖动方向控制(axis)

===============================================================//拖动范围控制(containment)

===============================================================//拖动吸附(snap,grid)

===============================================================//拖动div手柄（handle）