`
keimon
  • 浏览: 72850 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

元素的拖拽与重排

jquery 
阅读更多

<!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>

0
顶
0
踩
分享到：
常用示例
评论
发表评论

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

相关推荐

    jQuery拖动元素并对元素进行重新排序

    主要介绍了jQuery拖动元素并对元素进行重新排序的实现方法，感兴趣的小伙伴们可以参考一下

    Yale free 雅乐简谱打谱软件

    2、完全自由的排版：当程序提供的自动排版不能满足用户的需求时，用户可以通过键盘与鼠标非常容易的自由调整谱面元素位置。自由改变音符位置，改变音符间距、改变行间距等。 3、所见即所得 雅乐在开发过程中，非常...

    PowerPoint.2007宝典 3/10

    4.3.4　重排幻灯片　78 4.4　使用内容占位符　80 4.4.1　向占位符插入内容　80 4.4.2　占位符与手动插入的对象　81 4.5　手动创建文本框　81 4.5.1　何时应使用手动文本框　82 4.5.2　创建手动文本框　83 4.6　使用...

    PowerPoint.2007宝典 10/10

    4.3.4　重排幻灯片　78 4.4　使用内容占位符　80 4.4.1　向占位符插入内容　80 4.4.2　占位符与手动插入的对象　81 4.5　手动创建文本框　81 4.5.1　何时应使用手动文本框　82 4.5.2　创建手动文本框　83 4.6　使用...

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