分享一个首页模块拖拽的清单
由于项目需要,客户要求首页模块可以自由定义,考虑自己实现的效率,所以选择了用插件来实现,支持拖拽,效果如下:
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 //用于回收站 }); }); }); |
+
(^_^)打个赏喝个咖啡(^_^)

【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂