拖拽排序获取排序顺序

PROMULGATOR

对自己好的人

北京市

← 点击箭头进行图片之间的切换（原创）

→ canvas倒计时（原创）

相关代码

拖拽排序获取排序顺序

jQuery拖拽排序的简单实例

jquery拖拽排序

九宫格图片拖拽排序

图片拖拽排序(原创)

原生js面向对象拖拽排序

jquery ul li 按照时间排序

Html

Css

Js

.item_content {
	width:460px;
	height:200px;
	border:1px solid #ccc;
}
.item_content ul {
	list-style:none;
	width:460px;
	height:200px;
	padding-left:0px;
	margin:0;
}
.item_content ul li {
	width:50px;
	height:50px;
	float:left;
	margin:10px;
}
.item_content .item {
	width:50px;
	height:50px;
	line-height:50px;
	text-align:center;
	cursor:pointer;
	background:#ccc;
}
.item_content .item img {
	width:50px;
	height:50px;
}

let aDivs = $(".item");
let aImgs = [];
let newDivs1 = $(".aa");

for (let i = 0; i < aDivs.length; i++) {
    $(aDivs[i]).attr("index", i);
    aImgs.push(aDivs[i].innerHTML);

}

for (let i = 0; i < aImgs.length; i++) {
    newDivs1[i].onclick = function() {
        alert(i);
    }
    newDivs1[i].innerHTML = aImgs[i];
}

function getNum() {
    let aNums = [];
    let aDiv = $(".item");
    for (let i = 0; i < aDiv.length; i++) {

aNums.push(Number($(aDiv[i]).attr('index')));
    }

console.log(aNums);

let newDivs = $(".aa");

for (let i = 0; i < aImgs.length; i++) {
        newDivs[aNums[i]].innerHTML = aImgs[i];
        newDivs[aNums[i]].onclick = function() {
            alert(i);
        }
    }

}

$(function() {
    function Pointer(x, y) {
        this.x = x;
        this.y = y;
    }

function Position(left, top) {
        this.left = left;
        this.top = top;
    }
    //$(".item_container .item").each(function(i) {
    $(".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_container");
                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_container .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_container .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();
    });
});

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

立即下载

拖拽排序获取排序顺序



代码描述：jquery拖拽顺序

通过简单的方法获取排列顺序并展示效果

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

取消回复

<!doctype html> <html> <head> <meta charset="utf-8"> <title>拖拽排序获取排序顺序-jq22.com</title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style> </style> </head> <body> <script> </script> </body> </html>

2012-2021 jQuery插件库版权所有

jquery插件| jq22工具库| 网页技术| 广告合作| 在线反馈| 版权声明
沪ICP备13043785号-1 浙公网安备 33041102000314号