您好,登录后才能下订单哦!
*jquery库去我的下载里面下载
=============================================================== //监听事件与回显
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script> <script type="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> <div id="dragsource" > <p>拽我!</p> </div> <div id="droppalbe" > <p>Drop here</p> </div> <div id="div1" > </div> <div id="div2" > </div> <div id="div3" > </div> </body> </html>
=============================================================== //复制拖动(helper)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> //复制拖动 $(function () { $("#resource").draggable({ helper: "clone" }); $("#targer").droppable({ drop: function (event, ui) {//把源div放在容器中时触发 var div = $("#resource").clone(false); //复制div div.css({"top":ui.offset.top+"px","left":ui.offset.left+"px"});//设置坐标 $(this).append(div);//在容器中添加div } }); }); </script> </head> <body> <div></div> <div > <div id="resource" ></div> </div> <div id="targer"></div> </body> </html>
=============================================================== //拖动方向控制(axis)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //拖动方向控制 $("#resouce").draggable({ //axis: "x"//限制x轴移动 axis: "y"//限制y轴移动 }); }); </script> </head> <body> <div id="resouce"></div> </body> </html>
=============================================================== //拖动范围控制(containment)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> //拖动范围控制 $(function () { $("#resource").draggable({ //containment: $("#targer") 第一种方式 // containment:"parent" 第二种方式 containment:[0,0,300,200] //第三种方式 }); }); </script> </head> <body> <div id="targer"> <div id="resource" ></ </div> div> </body> </html>
=============================================================== //拖动吸附(snap,grid)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.js"></script> <script type="text/javascript"> $(function () { //拖动吸附 $("#source1").draggable({ snap:true }); $("#source2").draggable({ snap: "#targer" }); $("#source3").draggable({ grid: [50,50] }); }); </script> </head> <body> <div id="targer" >容器</div> <br /><br /><br /> <div id="source1" >吸附到可拖动div</div> <br /><br /><br /> <div id="source2" >吸附到容器</div> <br /><br /><br /> <div id="source3" >吸附到网格</div> </body> </html>
=============================================================== //拖动div手柄(handle)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.4.2.min.js" type="text/javascript"></script> <script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { //拖动div手柄 $("#resource").draggable({ handle:$(".p") }); }); </script> </head> <body> <div id="resource" > <p class="p" ></p> </div> </body> </html>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。