实现鼠标拖拉图片交换图片位置

最新推荐文章于 2022-11-13 19:11:36 发布

James_zcj

最新推荐文章于 2022-11-13 19:11:36 发布

阅读量1k

点赞数

分类专栏： Html

本文链接：https://blog.csdn.net/u010740174/article/details/53058024

版权

Html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

注意：需要先引用jQuery文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>

<head>
    <title>编辑产品</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <script type="text/javascript" src="jquery.min.js"></script>
</head>

<body>
    <div id="picshow"></div>
</body>
<script>
    $(function () {
    var pics = [
        "http://image.dhgate.com/100x100/f2/albu/g4/M01/54/41/rBVaEVe1ZP-ATarBAAHGXGrgpgI790.jpg",
        "http://image.dhgate.com/100x100/f2/albu/g4/M01/27/E9/rBVaEVe-T8SAZYZJAAEfQBN-ecs788.jpg",
        "https://cbu01.alicdn.com/img/ibank/2016/582/034/3305430285_1844158023.jpg",
        "http://image.dhgate.com/100x100/f2/albu/g4/M01/27/E9/rBVaEVe-T8SAZYZJAAEfQBN-ecs788.jpg",
        "https://cbu01.alicdn.com/img/ibank/2016/582/034/3305430285_1844158023.jpg",
        "https://cbu01.alicdn.com/img/ibank/2016/582/034/3305430285_1844158023.jpg",
        "http://image.dhgate.com/100x100/f2/albu/g4/M01/27/E9/rBVaEVe-T8SAZYZJAAEfQBN-ecs788.jpg",
        "https://cbu01.alicdn.com/img/ibank/2016/582/034/3305430285_1844158023.jpg"
    ];
    pics.forEach(function (pic) {
        var picbox = $('<div class="picbox"><div style="width:102px;height:102px;float:left;border:1px solid #d4deee;" class="imgdiv"></div></div>').appendTo($("#picshow"));
        picbox.children(".imgdiv").append('<img style="width:100px;height:100px;" src="' + pic + '"/>');
    });
    $("#picshow .picbox .imgdiv img").click(function () {
        var imgdiv = $(this).parent();
        var cl = imgdiv.css("border-color");
        if (cl == "rgb(212, 222, 238)") {
            imgdiv.css("border-color", "#ff0000");
        } else {
            imgdiv.css("border-color", "#d4deee");
        }
    });
    var relayout = function () {
        var imgs = $("#picshow .picbox .imgdiv img");
        // imgs.unbind("dragstart");
        // imgs.unbind("dragover");
        // imgs.unbind("drop");
        var srcImgDiv = null;
        imgs.bind("dragstart", function () {
            srcImgDiv = $(this).parent().parent();
        });
        imgs.bind("dragover", function (event) {
            event.preventDefault();
        });
        imgs.bind("drop", function (event) {
            event.preventDefault();
            var num1 = 0;
            var num2 = 0;
            var srcImgDiv2 = $(this).parent().parent();
            $("#picshow .picbox").each(function (i, m) {
                if (srcImgDiv[0] == m) {
                    num1 = i;
                }
                if (srcImgDiv2[0] == m) {
                    num2 = i;
                }
            });
            if (num1 > num2) {
                srcImgDiv2.before(srcImgDiv);
            } else if (num1 < num2) {
                srcImgDiv2.after(srcImgDiv);
            }
        });
    };
    relayout();
});
</script>

</html>

James_zcj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
实现鼠标拖拉图片交换图片位置

注意：需要先引用jQuery文件编辑产品 $(function () { var pics = [ "http://image.dhgate.com/100x100/f2/albu/g4/M01/54/41/rBVaEVe1ZP-ATarBAAHGXGrgpgI790.jpg", "
复制链接

扫一扫