`
qianqian_1216
  • 浏览: 34257 次
  • 来自: ...
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

gerybox 牛人很强的js

CSSDWRJavaScriptXHTMLHTML 
阅读更多

<!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" xml:lang="en">
<head>
    <title>Sortable list</title>
    <script type="text/javascript" src="../AJS.js"></script>
    <link href="../static/style.css" rel="stylesheet" type="text/css" media="all" />

    <style type="text/css">
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            width: 200px;
        }

        td {
            padding: 3px;
        }

        .item {
            background-color: #fff2c3;
            border: 1px solid #999;
            width: 150px;
            padding: 5px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<h2>Sortable list</h2>
<ul id="list">
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">5</li>
</ul>

<script>
var table_items = AJS.$bytc('li', null, AJS.$('list'));

var on_hover = function(drop_zone, click_elm, drag_elm) {
    var drag_elm = AJS.drag_elm;
    if(drop_zone != click_elm) {
        var d_z_top = drop_zone.offsetTop;
        var d_z_middle = drop_zone.offsetTop + (drop_zone.offsetHeight/2);
        var d_e_bottom = drag_elm.offsetTop + drag_elm.offsetHeight;
        var d_e_top = drag_elm.offsetTop;

        if(d_e_bottom > d_z_middle && d_e_top < d_z_top)
            AJS.insertAfter(click_elm, drop_zone);
        if(d_e_top < d_z_middle && d_e_top > d_z_top)
            AJS.insertBefore(click_elm, drop_zone);
    }
}

var on_drag = function(click_elm) {
    AJS.setOpacity(AJS.drag_elm, 0.75);
}

AJS.map(table_items, function(item) {
    AJS.dragAble(item, null, {
                             move_x: false,
                             on_drag: on_drag,
                             hide_on_move: true});
    AJS.dropZone(item, {on_hover: on_hover});
});
</script>

</body>
</html>
强,可以随便改变<li>中内容的位置,有点www.uumap.com的味道uumap是用的好象是dwr,这个比那个简单多了,不错

分享到：
| group
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics