<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery UI Sortable - Portlets</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="ui/ui.core.min.js"></script>
<script type="text/javascript" src="ui/ui.sortable.min.js"></script>
<script type="text/javascript" src="config.js"></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<p>
布局： <a href="#" onClick="makeSort('1:3'); return false;">1:3</a> | <a href="#" onClick="makeSort('3:1'); return false;">3:1</a> | <a href="#" onClick="makeSort('1:1:2'); return false;">1:1:2</a> | <a href="#" onClick="makeSort('1:2:1'); return false;">1:2:1</a> | <a href="#" onClick="makeSort('2:1:1'); return false;">2:1:1</a>
</p>
<P>
风格：<input type="radio" name="themes" value="1" />黄色风格 <input type="radio" name="themes" value="2" />红色风格 <input type="radio" name="themes" value="3" checked="checked" />绿色风格
</P>
<p>功能模块：
<input type="checkbox" id="config_blog" value="1" checked="checked" />博客日志
<input type="checkbox" id="config_profile" value="1" checked="checked" />个人资料
<input type="checkbox" id="config_spaceinfo" value="1" checked="checked" />空间介绍
<input type="checkbox" id="config_gallery" value="1" checked="checked" />相册
<input type="checkbox" id="config_friends" value="1" checked="checked" />好友列表
<input type="checkbox" id="config_visitors" value="1" checked="checked" />最近访客
<input type="checkbox" id="config_thread" value="1" checked="checked" />话题列表
<input type="checkbox" id="config_comment" value="1" checked="checked" />留言评论
<input type="checkbox" id="config_doing" value="1" checked="checked" />最新动态
<input type="checkbox" id="config_avatar" value="1" checked="checked" />头像信息
<a href="#" onClick="addModule(); return false;">添加模块</a></p>
<p>
自定义：
</p>
<p>
<a href="#" onClick="saveConfig(); return false;">保存配置</a>
</p>
<br />
</div>
<div id="contentlist">
<div id="avatar" class="groupItem">
<div class="itemContent">
<div style="-moz-user-select: none;" class="itemHeader">头像信息<a href="#" class="closeEl">[-]</a></div>
<ul>
<li>Apples</li>
<li>Apples</li>
<li>Apples</li>
<li>Apples</li>
</ul>
</div>
</div>
<div id="doing" class="groupItem">
<div class="itemContent">
<div style="-moz-user-select: none;" class="itemHeader">最新动态<a href="#" class="closeEl">[-]</a></div>
<ul>
<li>Girls</li>
<li>Girls</li>
<li>Girls</li>
<li>Girls</li>
</ul>
</div>
</div>
<div id="comment" class="groupItem">
<div class="itemContent">
<div style="-moz-user-select: none;" class="itemHeader">留言簿<a href="#" class="closeEl">[-]</a></div>
<ul>
<li>Boys</li>
<li>Boys</li>
<li>Boys</li>
<li>Boys</li>
</ul>
</div>
</div>
<div id="thread" class="groupItem">
<div class="itemContent" >
<div style="-moz-user-select: none;" class="itemHeader">我的话题<a href="#" class="closeEl">[-]</a></div>
<ul>
<li>News</li>
<li>News</li>
<li>News</li>
<li>News</li>
</ul>
</div>
</div>
<div id="visitors" class="groupItem">
<div class="itemContent">
<div style="-moz-user-select: none;" class="itemHeader">最近访客<a href="#" class="closeEl">[-]</a></div>
<ul>
<li>Shopping</li>
<li>Shopping</li>
<li>Shopping</li>
<li>Shopping</li>
</ul>
</div>
</div>
<div id="friends" class="groupItem">
<div class="itemContent">
<div style="-moz-user-select: none;" class="itemHeader">我的好友<a href="#" class="closeEl">[-]</a></div>
<ul>
<li>Dogs</li>
<li>Dogs</li>
<li>Dogs</li>
<li>Dogs</li>
</ul>
</div>
</div>
<div id="gallery" class="groupItem">
<div class="itemContent">
<div style="-moz-user-select: none;" class="itemHeader">我的相册<a href="#" class="closeEl">[-]</a></div>
<ul>
<li>Cat</li>
<li>Cat</li>
<li>Cat</li>
<li>Cat</li>
</ul>
</div>
</div>
<div id="spaceinfo" class="groupItem">
<div class="itemContent">
<div style="-moz-user-select: none;" class="itemHeader">空间介绍<a href="#" class="closeEl">[-]</a></div>
<ul>
<li>Links</li>
<li>Links</li>
<li>Links</li>
<li>Links</li>
</ul>
</div>
</div>
<div id="profile" class="groupItem">
<div class="itemContent">
<div style="-moz-user-select: none;" class="itemHeader">个人资料<a href="#" class="closeEl">[-]</a></div>
<ul>
<li>Images</li>
<li>Images</li>
<li>Images</li>
<li>Images</li>
</ul>
</div>
</div>
<div id="blog" class="groupItem">
<div class="itemContent">
<div style="-moz-user-select: none;" class="itemHeader">我的日志<a href="#" class="closeEl">[-]</a></div>
<ul>
<li>Humens</li>
<li>Humens</li>
<li>Humens</li>
<li>Humens</li>
</ul>
</div>
</div>
</div>
<div id="module_l" class="groupWrapper w250"> </div>
<div id="module_m" class="groupWrapper w500"> </div>
<div id="module_r" class="groupWrapper w250"> </div>
</body>
</html>
jQuery层拖拽，模仿QQ空间的模块拖动功能.rar （9个子文件） 
codefans.net 个人拖拽，模仿QQ空间 ui 
ui.sortable.js 37KB ui.sortable.min.js 23KB ui.core.min.js 8KB ui.core.js 14KB config.js 2KB jquery-1.3.2.js 118KB jquery-1.3.2.min.js 56KB
demo.html 6KB style.css 1KB
- 1
- 2
前往页