美文网首页
jQuery动画图片拖动排序效果

jQuery动画图片拖动排序效果

作者: blank的小粉er | 来源:发表于2018-06-29 12:06 被阅读0次
    <!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>jQuery动画图片拖动排序效果</title>
    <style>
    *{ margin:0; padding:0; list-style:none;}
    
    .item_content ul {list-style:none;}
    .item_content ul li {width:200px;height:120px;float:left;margin:10px 0px 0px 10px;}
    .item_content {width:640px;height:400px;border:1px solid #ccc;margin:10px auto;}
    .item_content .item {width:200px;height:120px;line-height:120px;text-align:center;cursor:pointer;background:#ccc;}
    .item_content .item img {width:200px;height:120px;border-radius:6px;}
    </style>
    </head>
    <body>
    <!-- 代码部分begin -->
      <div class="item_content">
        <ul>
          <li><div class="item"><img src="http://demo.lanrenzhijia.com/2014/pic0929/images/youku.png" /></div></li>
          <li><div class="item"><img src="http://demo.lanrenzhijia.com/2014/pic0929/images/jd.png" /></div></li>
          <li><div class="item"><img src="http://demo.lanrenzhijia.com/2014/pic0929/images/taobao.png" /></div></li>
          <li><div class="item"><img src="http://demo.lanrenzhijia.com/2014/pic0929/images/fenghuan.png" /></div></li>
          <li><div class="item"><img src="http://demo.lanrenzhijia.com/2014/pic0929/images/souhu.png" /></div></li>
          <li><div class="item"><img src="http://demo.lanrenzhijia.com/2014/pic0929/images/wangyi.png" /></div></li>
          <li><div class="item"><img src="http://demo.lanrenzhijia.com/2014/pic0929/images/renren.png" /></div></li>
          <li><div class="item"><img src="http://demo.lanrenzhijia.com/2014/pic0929/images/360.png" /></div></li>
          <li><div class="item"><img src="http://demo.lanrenzhijia.com/2014/pic0929/images/360game.png" /></div></li>
        </ul>
      </div>
    <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script>
    <script>
        $(function() {
            function Pointer(x, y) {
                this.x = x ;
                this.y = y ;
            }
            function Position(left, top) {
                this.left = left ;
                this.top = top ;
            }
            $(".item_content .item").each(function(i) {
                this.init = function() { // 初始化
                    this.box = $(this).parent() ;
                    $(this).attr("index", i).css({
                        position : "absolute",
                        left : this.box.offset().left,
                        top : this.box.offset().top
                    }).appendTo(".item_content") ;
                    this.drag() ;
                },
                this.move = function(callback) {  // 移动
                    $(this).stop(true).animate({
                        left : this.box.offset().left,
                        top : this.box.offset().top
                    }, 500, function() {
                        if(callback) {
                            callback.call(this) ;
                        }
                    }) ;
                },
                this.collisionCheck = function() {
                    var currentItem = this ;
                    var direction = null ;
                    $(this).siblings(".item").each(function() {
                        if(
                            currentItem.pointer.x > this.box.offset().left &&
                            currentItem.pointer.y > this.box.offset().top &&
                            (currentItem.pointer.x < this.box.offset().left + this.box.width()) &&
                            (currentItem.pointer.y < this.box.offset().top + this.box.height())
                        ) {
                            // 返回对象和方向
                            if(currentItem.box.offset().top < this.box.offset().top) {
                                direction = "down" ;
                            } else if(currentItem.box.offset().top > this.box.offset().top) {
                                direction = "up" ;
                            } else {
                                direction = "normal" ;
                            }
                            this.swap(currentItem, direction) ;
                        }
                    }) ;
                },
                this.swap = function(currentItem, direction) { // 交换位置
                    if(this.moveing) return false ;
                    var directions = {
                        normal : function() {
                            var saveBox = this.box ;
                            this.box = currentItem.box ;
                            currentItem.box = saveBox ;
                            this.move() ;
                            $(this).attr("index", this.box.index()) ;
                            $(currentItem).attr("index", currentItem.box.index()) ;
                        },
                        down : function() {
                            // 移到上方
                            var box = this.box ;
                            var node = this ;
                            var startIndex = currentItem.box.index() ;
                            var endIndex = node.box.index(); ;
                            for(var i = endIndex; i > startIndex ; i--) {
                                var prevNode = $(".item_content .item[index="+ (i - 1) +"]")[0] ;
                                node.box = prevNode.box ;
                                $(node).attr("index", node.box.index()) ;
                                node.move() ;
                                node = prevNode ;
                            }
                            currentItem.box = box ;
                            $(currentItem).attr("index", box.index()) ;
                        },
                        up : function() {
                            // 移到上方
                            var box = this.box ;
                            var node = this ;
                            var startIndex = node.box.index() ;
                            var endIndex = currentItem.box.index(); ;
                            for(var i = startIndex; i < endIndex; i++) {
                                var nextNode = $(".item_content .item[index="+ (i + 1) +"]")[0] ;
                                node.box = nextNode.box ;
                                $(node).attr("index", node.box.index()) ;
                                node.move() ;
                                node = nextNode ;
                            }
                            currentItem.box = box ;
                            $(currentItem).attr("index", box.index()) ;
                        }
                    }
                    directions[direction].call(this) ;
                },
                this.drag = function() { // 拖拽
                    var oldPosition = new Position() ;
                    var oldPointer = new Pointer() ;
                    var isDrag = false ;
                    var currentItem = null ;
                    $(this).mousedown(function(e) {
                        e.preventDefault() ;
                        oldPosition.left = $(this).position().left ;
                        oldPosition.top =  $(this).position().top ;
                        oldPointer.x = e.clientX ;
                        oldPointer.y = e.clientY ;
                        isDrag = true ;
                        
                        currentItem = this ;
                        
                    }) ;
                    $(document).mousemove(function(e) {
                        var currentPointer = new Pointer(e.clientX, e.clientY) ;
                        if(!isDrag) return false ;
                        $(currentItem).css({
                            "opacity" : "0.8",
                            "z-index" : 999
                        }) ;
                        var left = currentPointer.x - oldPointer.x + oldPosition.left ;
                        var top = currentPointer.y - oldPointer.y + oldPosition.top ;
                        $(currentItem).css({
                            left : left,
                            top : top
                        }) ;
                        currentItem.pointer = currentPointer ;
                        // 开始交换位置
                        
    
                        currentItem.collisionCheck() ;
                        
                        
                    }) ;
                    $(document).mouseup(function() {
                        if(!isDrag) return false ;
                        isDrag = false ;
                        currentItem.move(function() {
                            $(this).css({
                                "opacity" : "1",
                                "z-index" : 0
                            }) ;
                        }) ;
                    }) ;
                }
                this.init() ;
            }) ;
        }) ;
    </script>
    <!-- 代码部分end -->
    </body>
    </html>
    
    1.png

    相关文章

      网友评论

          本文标题:jQuery动画图片拖动排序效果

          本文链接:https://www.haomeiwen.com/subject/lqfayftx.html