Jquery DIV 挪动

时间：2015-07-07 12:35:57 阅读：149 评论：0 收藏：0 [点我收藏+]
标签：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="title" content="Jquery Div自由拖动排序" />
<meta name="keywords" content="Jquery Div自由拖动排序，JqueryDiv排序，Jquery拖动，排序" />
<meta name="description" content="Jquer模块自由拖动排序-彭亚欧个人博客代码中心" />
<title>Jquery Div自由拖动排序</title>
<style type="text/css">
.cur {
    width: 200px;
    height: 90px;
    background-color: #0078ca;
    position: absolute;
    cursor: pointer;
    text-align: center;
    color: #fff;
    font: 35px "微软雅黑", Arial, Helvetica, sans-serif;
    padding-top: 30px;
}
#nblock_mid {
    position: absolute;
    width: 1000px;
    left: 30px;
}
.linkA {
    color: #333;
    font: 25px "微软雅黑", Arial, Helvetica, sans-serif;
    text-decoration:none;
}
</style>
</head>
<body>
<div id="nblock_mid">
  <div class="cur"></div>
  <div class="cur"></div>
  <div class="cur"></div>
  <div class="cur"></div>
  <div class="cur"></div>
  <div class="cur"></div>
  <div class="cur"></div>
  <div class="cur"></div>
  <div class="cur"></div>
</div>


</body>
<script type="text/javascript" src="http://www.pengyaou.com/jquery-1.4.min.js">
    </script>
<script type="text/javascript">
        $(document).ready(function(e) {
            SortDivHandler.Initialize();
            if (typeof(document.onselectstart) != "undefined") {
                // IE下禁止元素被选取       
                document.onselectstart = new Function("return false");
            } else {
                // firefox下禁止元素被选取的变通办法       
                document.onmousedown = new Function("return false");
                document.onmouseup = new Function("return true");
            }
        });
        var SortDivHandler = {
            CurrentLocationX: 0,
            CurrentLocationY: 0,
            CurrentSortFlag: 0,
            CurrentSortDiv: null,
            CurrentSortMove: 0,
            Initialize: function() {
                var isStart = false;
                var curCount = parseInt(($("#nblock_mid").width() - 90) / 300);
                for (var i = 0; i < $(".cur").length; i++) {
                    var floorCount = Math.ceil((i + 1) / curCount);
                    $($(".cur")[i]).attr("id", i);
                    $($(".cur")[i]).html(i + 1);
                    if ((i + 1) <= curCount) {
                        $($(".cur")[i]).animate({
                            left: 30 + i * 200 + (i - 1) * 30 + "px",
                            top: "30px"
                        }, 200 + i * 100);
                    } else if ((i + 1) > 3) {
                        var itemIndex = (i) % 3;
                        $($(".cur")[i]).animate({
                            left: 30 + itemIndex * 200 + (itemIndex - 1) * 30 + "px",
                            top: (floorCount - 1) * 120 + 30 * (floorCount - 1) + 30
                        }, 300 + i * 100);
                    }
                }
                var isDrag = true;
                $(".cur").mousedown(function(e) {
                    var SortTarget = $(this);
                    SortDivHandler.CurrentSortMove = 0;
                    SortDivHandler.CurrentSortDiv = $(this);
                    isDrag = true;
                    $(".cur").css("z-index", 1);
                    SortDivHandler.CurrentSortDiv.css("z-index", -1).css("opacity", 0.8);
                    SortDivHandler.CurrentLocationX = SortTarget.offset().left;
                    SortDivHandler.CurrentLocationY = SortTarget.offset().top;
                    SortTarget.attr("drag", 1);
                    SortTarget.css("position", "absolute");
                    SortTarget.css("cursor", "default");
                    var currentTarget = SortTarget;
                    var currentDisX = e.pageX - $(this).offset().left;
                    var currentDisY = e.pageY - $(this).offset().top;
                    $(document).mousemove(function(event) {
                        if ($(currentTarget).attr("drag") == 0 || SortDivHandler.CurrentSortMove == 1) return;
                        var currentX = event.clientX;
                        var currentY = event.clientY;
                        var cursorX = event.pageX - currentDisX; // $(this).offset().left;  
                        var cursorY = event.pageY - currentDisY; //-$(this).offset().top; 
                        // $(currentTarget)
                        $(currentTarget).css("top", cursorY - 8 + "px").css("left", cursorX - 30 + "px");
                        isStart = true;

                    });
                    $(document).mouseup(function() {
                        //  if(isDrag==false)return;
                        $(currentTarget).attr("drag", 0);

                    });
                });
                $(".cur").mousemove(function() {
                    if (isStart == false) return;
                    if (SortDivHandler.CurrentSortFlag == 0) {
                        if ($(this).attr("id") == SortDivHandler.CurrentSortDiv.attr("id")) {
                            return;
                        } else {
                            if (SortDivHandler.CurrentSortMove == 1) return;
                            SortDivHandler.CurrentSortMove = 1;
                            var targetX = $(this).offset().left;
                            var targetY = $(this).offset().top;
                            SortDivHandler.CurrentSortDiv.stop(true).animate({
                                left: targetX - 30 + "px",
                                top: targetY - 8 + "px"
                            }, 500, function() {
                                $(this).css("opacity", 1);
                            });
                            $(this).stop(true).animate({
                                left: SortDivHandler.CurrentLocationX - 30 + "px",
                                top: SortDivHandler.CurrentLocationY - 8 + "px"
                            }, 300, function() {});
                            isDrag = false;
                        }
                    }
                });
                $(".cur").mouseup(function() {
                    if (isDrag == false) return;
                    SortDivHandler.CurrentSortMove = 1;
                    SortDivHandler.CurrentSortDiv.stop(true).animate({
                        left: SortDivHandler.CurrentLocationX - 30 + "px",
                        top: SortDivHandler.CurrentLocationY - 8 + "px"
                    }, 500, function() {
                        SortDivHandler.CurrentSortDiv.css("z-index", -1).css("opacity", 1);
                    });
                });


            }
        }
    </script>
</html>
查看演示
转 http://www.pengyaou.com/codejq/JWJSKFSJK_46.html
Jquery DIV 挪动
标签：
原文地址：http://www.cnblogs.com/helinfeng/p/4626356.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行