退出
充值

jQuery拖拽图片diy组合图形代码

作者/代码整理:  (转载请附加本文地址,带有“懒人原生”字样的谢绝转载) 发布日期:2020-07-15
这是一款jQuery拖拽图片diy组合图形代码,点击下面的png图片会出现在上面的背景图,然后可以任意拖拽进行组合。


js代码

<script src="js/jquery.min.js"></script>
<script src="js/touch.min.js"></script>
<script src="js/myTouchImg.js"></script>
<script>
    $(function () {
        //贴纸功能
        $('.ioc').click(function () {
            var html = ['<div class="set-box">',
                '   <img src="' + $(this).attr('src') + '" class="set-img" draggable="false" ondragstart="return false;">',
                '   <img src="img/close-icon2.png" class="set-close">',
                '</div>'].join("");

            $('.ioc-main-box').append(html);
            myTouchjs($('.set-box').last());
        });

        //删除贴纸
        $(document).on('click', '.set-close', function (e) {
            $(this).parent().remove();
        });

        //将操作的贴纸置于最上层
        $(document).on('mousedown touchstart', '.set-box', function (e) {
            $(this).css({"z-index": '1'});
            $(this).siblings().css({"z-index": '0'});
        });
    })
</script>