jquery网页层拖动实例,保存可以自己实现
查看效果
下载地址
老外的基于jQuery的网页层拖动实例，自动寻找落点，不过不好的地方是没有保存，下次再打开时又复位了，高手感兴趣可以自己修改下，好的地方还是可以借鉴的。
前台部分代码
代码 DOCTYPE html > < html lang ="en" >
< head >
< title > UI Sortable: Layout Demo:http://www.jscss8.com title >
< meta http-equiv ="Content-Type" content ="text/html; charset=iso-8859-1" />
< meta name ="title" content ="UI Sortable: Layout Demo" />
< meta name ="description" content ="A sortable layout created with the jQuery UI suite" />
< meta name ="author" content ="Joan Piedra" />
< meta name ="author-url" content ="http://www.joanpiedra.com/" />
< meta name ="author-url" content ="http://www.justaquit.com/" />
< meta name ="author-url" content ="http://jquery.com/" />
< link rel ="shortcut icon" href ="http://jquery.com/favicon.ico" />
< link rel ="icon" href ="http://jquery.com/favicon.ico" type ="image/x-icon" />
< link rel ="stylesheet" href ="demo.css" type ="text/css" media ="screen" />
head >
< body id ="uidemo" >
< h1 > UI Sortable: < em > Layout demo em > h1 >
< div id ="container" >
< div id ="header" class ="ui-sortable" >
< h2 > Header h2 >
< dl class ="sort" >
< dt > Pages dt >
< dd > Main Navigation dd >
dl >
div >
< div id ="content" class ="ui-sortable" >
< h2 > Content h2 >
< dl class ="sort" >
< dt > Blog dt >
< dd >< a href ="http://www.codefans.net" > www.CodeFans.net a > dd >
dl >
div >
< div id ="sidebar" class ="ui-sortable" >
< h2 > Sidebar h2 >
< dl class ="sort" >
< dt > Pages dt >
< dd > CodeFans.net dd >
dl >
< dl class ="sort" >
< dt > Blog dt >
< dd > Monthly Archives dd >
dl >
< dl class ="sort" >
< dt > Links dt >
< dd >< a href ="http://www.codefans.net" > www.CodeFans.net a > dd >
dl >
div >
< div class ="clear" > div >
< div id ="footer" class ="ui-sortable" >
< h2 > Footer h2 >
< dl class ="sort" >
< dt > Pages dt >
< dd > Copyright dd >
dl >
div >
div >
< div id ="trashcan" class ="ui-sortable" >
< h2 > Trash can h2 >
< p > Drag modules here to delete them. p >
div >
< div class ="clear" > div >
< div id ="overlay" >
< div id ="preloader" >< img src ="loader.gif" alt ="" /> div >
div >
< script type ="text/javascript" src ="jquery-1.2.6.js" > script >
< script type ="text/javascript" src ="ui.core.js" > script >
< script type ="text/javascript" src ="ui.draggable.js" > script >
< script type ="text/javascript" src ="ui.droppable.js" > script >
< script type ="text/javascript" src ="ui.sortable.js" > script >
< script type ="text/javascript" src ="demo.js" > script >
body >
html >
转载于:https://www.cnblogs.com/s7mmersupport/archive/2010/06/25/1764829.html
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！