分享一个首页模块拖拽的清单

    由于项目需要，客户要求首页模块可以自由定义，考虑自己实现的效率，所以选择了用插件来实现，支持拖拽，效果如下：

JS引入

  

<script language="javascript" src="jquery-1.2.4a.js"></script>
<script language="javascript" src="ui.base.min.js"></script>
<script language="javascript" src="ui.droppable.min.js"></script>
<script language="javascript" src="ui.draggable.min.js"></script>
<script language="javascript" src="ui.sortable.min.js"></script>
<script language="javascript" src="17.js"></script>

HTML部分：

<div id="container">
    	<div id="header" class="ui-sortable">
        	<h2>头版头条</h2>
			<dl class="sort">
				<dt>新闻首页</dt>
				<dd>hellohellohellohellohellohellohellohellohellohello</dd>
				<dd>hellohellohellohellohellohellohellohellohellohello</dd>
			</dl>
		</div>
			
		<div id="content" class="ui-sortable">
			<h2>详细内容</h2>
			<dl class="sort">
				<dt>hellohellohellohellohellohellohellohellohellohello</dt>
				<dd>hellohellohellohellohellohellohellohellohellohello</dd>
				<dd>hellohellohellohellohellohellohellohellohellohello</dd>
			</dl>
		</div>
			
		<div id="sidebar" class="ui-sortable">
			<h2>滚动新闻</h2>
			<dl class="sort">
				<dt>hellohel </dt>
				<dt>hellohel </dt>
				<dt>hellohel </dt>
			</dl>
			<dl class="sort">
				<dt>hellohellohelloh</dt>
				<dd>isaac</dd>
                   <dd>fresheggs</dd>
			</dl>
			<dl class="sort">
				<dt>hellohellohellohellohellohel </dt>
				<dt>hellohellohellohellohellohel </dt>
				<dt>hellohellohellohellohellohel </dt>
			</dl>
		</div>
		
		<div class="clear"></div>
	
		<div id="footer" class="ui-sortable">
			<h2>页脚项</h2>
			<dl class="sort">
				<dt>版权信息</dt>
				<dd>Copyright: Zeng Shun, EE, Tsinghua University</dd>
			</dl>
		</div>
	</div>
		
	<div id="trashcan" class="ui-sortable">
		<h2>回收站</h2>
	</div>

JS部分：　　　　　　　　　　　　　　　　　　　　　　　　　　

$(function(){
	var moveUp = function(){
		//向上移动子项目
		var link = $(this),
			dl = link.parents("dl"),
			prev = dl.prev("dl");	
		if(link.is(".up") && prev.length > 0)
			dl.insertBefore(prev);
	};
	
	var addItem = function(){
		//添加一个子项目
		var sortable = $(this).parents(".ui-sortable");
		var options = '<span class="options"><a class="up"><img src="up.gif" border="0"></a></span>';
		var html = '<dl class="sort"><dt>Dynamic name'+options+'</dt><dd>Description</dd></dl>';
		sortable.append(html).sortable("refresh").find("a.up").bind("click", moveUp);
	};
	
	var emptyTrashCan = function(item){
		//回收站
		item.remove();
	};
	
	var sortableChange = function(e, ui){
		//拖拽子项目
		if(ui.sender){
			var w = ui.element.width();
			ui.placeholder.width(w);
			ui.helper.css("width",ui.element.children().width());
		}
	};
	
	var sortableUpdate = function(e, ui){
		//更新模块（用户回收站清空后）
		if(ui.element[0].id == "trashcan"){
			emptyTrashCan(ui.item);
		}
	};
	
	$(function(){
		//引用主页面中的所有块
		var els = ['#header', '#content', '#sidebar', '#footer', '#trashcan'];
		var $els = $(els.toString());
		
		//动态添加“增加子项目”、“向上移动”按钮
		$("h2", $els.slice(0,-1)).append('<span class="options"><a class="add"><img src="add.gif" border="0"></a></span>');
		$("dt", $els).append('<span class="options"><a class="up"><img src="up.gif" border="0"></a></span>');
		
		//绑定相关事件
		$("a.add").bind("click", addItem);
		$("a.up").bind("click", moveUp);
		
		//使用jQuery插件
		$els.sortable({
			items: '> dl',	//拖拽对象
			handle: 'dt',	//可触发该事件的对象
			cursor: 'move',	//鼠标样式
			opacity: 0.8,	//拖拽时透明
			appendTo: 'body',
			connectWith: els,
			start: function(e,ui) {
				ui.helper.css("width", ui.item.width());
			},
			change: sortableChange,
			update: sortableUpdate		//用于回收站
		});
	});
});

链接下载