Jackyfei

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

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

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      //用于回收站
        });
    });
});

链接下载

+

(^_^)打个赏喝个咖啡(^_^)

微信支付
posted @   张飞洪[厦门]  阅读(3574)  评论(16编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
点击右上角即可分享
微信分享提示