图片拖拽切换位置

Html

Css

* {
	margin:0;
	padding:0;
}
.contain {
	width:580px;
	height:370px;
	margin:50px auto;
	border:1px solid #ccc;
}
.contain ul li {
	float:left;
	width:180px;
	height:110px;
	list-style:none;
	margin:10px 0 0 10px;
}
.contain .item {
	width:180px;
	height:110px;
	background:#ccc;
}
.contain img {
	width:180px;
	height:110px;
	border-radius:5px;
	cursor:pointer;
}

$(function() {
    //鼠标坐标位置对象
    function Pointer(x, y) {
        this.x = x;
        this.y = y;
    }
    //div定位值对象
    function Position(left, top) {
        this.left = left;
        this.top = top;
    }

//把浮动布局改为定位布局
    $('.item').each(function(i) {
        //console.log(this); //this作用域
        //console.log(arguments); //实参列表

//存储每个div得父元素
        this.init = function() {
                this.box = $(this).parent();
                this.moving = false;
                //console.log(this.box.offset().left);
                $(this).attr("index", i).css({
                    position: 'absolute',
                    left: this.box.offset().left,
                    top: this.box.offset().top
                }).appendTo('.contain');
                this.drag();
            },

//拖拽功能
            this.drag = function() {
                var oldPointer = new Pointer();
                var oldPosition = new Position();
                var isDrag = false; //判断当前div是否被推拽
                var currentItem = this;
                //鼠标按下去时操作
                $(this).mousedown(function(e) {
                    isDrag = true;
                    //获取鼠标的坐标位置
                    oldPointer.x = e.clientX;
                    oldPointer.y = e.clientY;
                    //获取div原来的定位置
                    oldPosition.left = $(this).position().left;
                    oldPosition.top = $(this).position().top;
                })
                //鼠标移动
                $(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.impact();
                });
                //鼠标抬起
                $(document).mouseup(function() {
                    if (!isDrag) return false;
                    isDrag = false;
                    //鼠标抬起改变透明
                    currentItem.move(function() {
                        $(this).css({
                            opacity: 1,
                            'z-index': 0
                        });
                        this.moving = false;
                    });
                });

//碰撞检测功能
            this.impact = function() {
                var currentItem = this;
                var direction = ''; //碰撞成功得方向
                $(this).siblings('.item').each(function() {
                    if (currentItem.pointer.x > this.box.offset().left &&
                        currentItem.pointer.x < this.box.offset().left + this.box.width() &&
                        currentItem.pointer.y > this.box.offset().top &&
                        currentItem.pointer.y < this.box.offset().top + this.box.height()) {
                        //console.log('碰撞成功')
                        //比较当前拖拽得div得父元素和兄弟元素得父元素
                        if (currentItem.box.offset().top < this.box.offset().top) {
                            //向下碰撞成功
                            direction = "down";
                            console.log('向下碰撞成功');
                        } else if (currentItem.box.offset().top > this.box.offset().top) {
                            //向上碰撞成功
                            direction = "up";
                            console.log('向上碰撞成功');
                        } else {
                            //左右碰撞成功
                            direction = "normal";
                            console.log('左右碰撞成功');
                        }
                        this.swap(currentItem, direction);
                    }
                });
            },

//交换位置
            this.swap = function(currentItem, direction) {
                if (this.moving) 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 node = this;
                        var box = this.box;
                        //当前拖拽盒子父元素的索引
                        var startIndex = currentItem.box.index();
                        //碰撞成功得兄弟父元素的索引
                        var endIndex = node.box.index();
                        for (var i = endIndex; i > startIndex; i--) {
                            //循环获取初始索引和结束索引之间的每一个item
                            var prevNode = $(".contain .item[index=" + (i - 1) + "]")[0];
                            //依次交换每个item的父元素
                            node.box = prevNode.box;
                            // 交换位置
                            node.move();
                            //更改每个item的index属性值
                            $(node).attr("index", node.box.index());
                            node = prevNode;
                        }
                        currentItem.box = box;
                        $(currentItem).attr("index", box.index());
                    },
                    up: function() {
                        var node = this;
                        var box = this.box;
                        var startIndex = node.box.index();
                        var endIndex = currentItem.box.index();
                        for (var i = startIndex; i < endIndex; i++) {
                            var nextNode = $(".contain .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
                directions[direction].call(this);
            },

this.move = function(callback) {
                this.moving = true;
                $(this).stop().animate({
                    left: this.box.offset().left,
                    top: this.box.offset().top
                }, 500, function() {
                    callback && callback.call(this);
                })
            }

this.init();
    });
});

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

图片拖拽切换位置



代码描述：通过拖拽效果实现图片的位置切换

通过拖拽效果实现图片的位置切换，后面的拖拽到前面

2

最新

发表评论全部评论

暂时没有评论！

huzhipeng0

2017/8/1 15:38:03

第二排的第一个与第三排的第一个图片位置不能交换，第一排的第二列与第二排的第二列图片位置不能交换

飘逸影0

2017/8/2 13:06:25

兄弟这个不能换多了去了前不能喝后面超过两个模块交换，但是后面可以往前还而且还完后全部变位置，所以说这个有什么用？

回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

恬恬~

相关代码

图片拖拽切换位置

最新