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

这是一款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>
点击下载
RIPRO主题是一个优秀的主题,极致后台体验,无插件,集成会员系统
优富资源 » jQuery拖拽图片diy组合图形代码

发表评论

  • 1会员总数(位)
  • 927资源总数(个)
  • 0本周发布(个)
  • 0今日发布(个)
  • 3022稳定运行(天)

优富资源网 国内最专业的站长资源平台

WordPress专区 整站源码

切换

博客


全屏


顶部