元素的拖拽与重排

最新推荐文章于 2025-05-06 15:41:36 发布

最新推荐文章于 2025-05-06 15:41:36 发布 · 210 阅读

文章标签：

#jquery #ViewUI

jquery 专栏收录该内容

41 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        ul, li, div, span, img{margin: 0; padding: 0;}
        #mydiv
        {
            width: 900px;
            background-color: #fff;
            border: 1px solid #000;
            position: absolute;
            left: 100px;
            height: 500px;
            overflow: scroll;
        }
        #mydiv ul{position: relative; overflow: hidden; list-style: none; margin-top: 10px; margin-left: 10px;}
        #mydiv li{float: left; background-color: #e1e1e1; margin-left: 10px; margin-bottom: 10px; width: 200px; height: 226px; position: relative;}
        #mydiv span{display: block; padding: 4px 10px;}
        img{width: 200px; height: 200px; background-color: #999;}

        .moveEle{position: absolute; z-index: 2; background-color: #e1e1e1; width: 200px; height: 226px; left: 0; right: 0;}
    </style>
    <script src="../../jquery-1.7.2.js" type="text/javascript"></script>
</head>
<body>
<div id="mydiv">
    <ul>
        <li class="">
            <span>1</span>
            <img src="images/img1.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>2</span>
            <img src="images/img2.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>3</span>
            <img src="images/img3.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>4</span>
            <img src="images/img4.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>5</span>
            <img src="images/img5.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>6</span>
            <img src="images/img6.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>7</span>
            <img src="images/img7.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>8</span>
            <img src="images/img8.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>9</span>
            <img src="images/img9.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>10</span>
            <img src="images/img10.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>11</span>
            <img src="images/img11.jpg" width="200" height="200"/>
        </li>
        <li>
            <span>12</span>
            <img src="images/img12.jpg" width="200" height="200"/>
        </li>
    </ul>
</div>
<script src="../../jquery-1.7.2.js"></script>
<script type="text/javascript">
    /**
     *元素移动效果
     * made by keimon
     */
    $(function () {
        var _bool = false, //鼠标是否按下
             cloneEle,
             moveEle,
             evtX,
             evtY;
        $('ul li').on('mousedown', function (e) {
            _bool = true;
            cloneEle = $(this).clone(true);
            moveEle = "<div class='moveEle'>"+cloneEle.html()+"</div>"; //移动的新元素
            $('body').append(moveEle);
            $(this).html("").addClass('emptyEle'); //空元素
            evtX = e.pageX;
            evtY = e.pageY;
            $('.moveEle').css('left', evtX + 'px');
            $('.moveEle').css('top', evtY + 'px');
        });
        $(document).delegate('li','mousemove', function (e) {
            if (!_bool) {
                return false
            }
            evtX = e.pageX;
            evtY = e.pageY;
            $('.moveEle').css('left', evtX + 'px');
            $('.moveEle').css('top', evtY + 'px');
            if($(e.currentTarget).hasClass('emptyEle')){
                return false;
            }else{
                var curIndex = $('ul li').index($(e.currentTarget));
                var empIndex = $('ul li').index($('.emptyEle'));
                if(curIndex<empIndex){
                    $(e.currentTarget).before($('.emptyEle'));
                }else{
                    $(e.currentTarget).after($('.emptyEle'));
                }
            }
        });
        $(document).bind('mouseup', function () {
            if (_bool) {
                cloneEle.css({'left':'auto', 'top':'auto'});
                $('.emptyEle').replaceWith(cloneEle);
                $('.moveEle').remove();
                _bool = false;
            }
        })
    })
</script>
</body>
</html>