创建类似 BBC 的可拖动排序效果

发布于 2024-09-11 03:41:20 字数 2775 浏览 3 评论 0原文

为此，我使用了 Jquery UI 并得到了同样的效果。

但麻烦的是，如果你在 BBC 网站上看到效果，当你选择一个分区时，会出现一个阴影，其下方有一条虚线，并且框之间的移动与我得到的效果有很大不同。

使用 Jquery UI 时，我浮动了

以使它们并排显示，但是当我移动框时，移动框会插入到框之间。

这是到目前为止我的编码。但这不是BBC的

<!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>Untitled Document</title>
    <link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
    <script src="js/lib/jquery.js"></script>
    <script src="js/lib/ui.js"></script>
    <script src="js/lib/widget.js"></script>
    <script src="js/lib/utilities/mouse.js"></script>
    <script src="js/lib/interactions/draggable.js"></script>
    <script src="js/lib/interactions/sortable.js"></script>    
    <style>
        * { margin:0;padding:0; }
        body {
            background:url(themes/default/images/background.gif);
            font-family:Verdana, Geneva, sans-serif;
            font-size:12px;
        }
        #wrapper {
            width:980px;
            margin: 0 auto;
            border:1px #F00 solid;
        }
        .sublayout {
            width:300px;
            height:300px;
            background:#aeadad;
            border:1px #2495f5 solid;
            float:left;
            margin:1em;
            -moz-box-shadow: 0 0 20px black;
            -webkit-box-shadow: 0 0 20px black;
            box-shadow: 0 0 20px black;         
        }
    </style>
    <script type="text/javascript">
    $(function() {
        $("#sortable").sortable({
            revert: true
        });
        $("#draggable").draggable({
            connectToSortable: '#sortable',
            helper: 'clone',
            revert: 'invalid'
        });
        $("ul, li").disableSelection();
    });
    </script>    
</head>

<body>
    <div id="wrapper">       
        <ul id="sortable">
            <li class="ui-state-default sublayout">Item 1</li>
            <li class="ui-state-default sublayout">Item 2</li>
            <li class="ui-state-default sublayout">Item 3</li>
            <li class="ui-state-default sublayout">Item 4</li>
            <li class="ui-state-default sublayout">Item 5</li>
        </ul>    
    </div>
</body>
</html>

原文

I want to create draggable and sortable effect like that of http://www.bbc.co.uk/.

For that I used Jquery UI and got kinda same effect.

But with complications, if you see the effect in BBC's website, when you pick a division there appears a shadow with a dotted line below it and the shifting between the boxes is pretty much different that I get.

When using the Jquery UI, I floated the <li> to appear them on side by side to each other, but when I am shifting the boxes, the shifting box gets inserted in between the boxes.

Here is my coding so far. But it is not that of BBC

<!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>Untitled Document</title>
    <link type="text/css" href="themes/base/jquery.ui.all.css" rel="stylesheet" />
    <script src="js/lib/jquery.js"></script>
    <script src="js/lib/ui.js"></script>
    <script src="js/lib/widget.js"></script>
    <script src="js/lib/utilities/mouse.js"></script>
    <script src="js/lib/interactions/draggable.js"></script>
    <script src="js/lib/interactions/sortable.js"></script>    
    <style>
        * { margin:0;padding:0; }
        body {
            background:url(themes/default/images/background.gif);
            font-family:Verdana, Geneva, sans-serif;
            font-size:12px;
        }
        #wrapper {
            width:980px;
            margin: 0 auto;
            border:1px #F00 solid;
        }
        .sublayout {
            width:300px;
            height:300px;
            background:#aeadad;
            border:1px #2495f5 solid;
            float:left;
            margin:1em;
            -moz-box-shadow: 0 0 20px black;
            -webkit-box-shadow: 0 0 20px black;
            box-shadow: 0 0 20px black;         
        }
    </style>
    <script type="text/javascript">
    $(function() {
        $("#sortable").sortable({
            revert: true
        });
        $("#draggable").draggable({
            connectToSortable: '#sortable',
            helper: 'clone',
            revert: 'invalid'
        });
        $("ul, li").disableSelection();
    });
    </script>    
</head>

<body>
    <div id="wrapper">       
        <ul id="sortable">
            <li class="ui-state-default sublayout">Item 1</li>
            <li class="ui-state-default sublayout">Item 2</li>
            <li class="ui-state-default sublayout">Item 3</li>
            <li class="ui-state-default sublayout">Item 4</li>
            <li class="ui-state-default sublayout">Item 5</li>
        </ul>    
    </div>
</body>
</html>

分享到QQ

分享到微博