图片拖拽在项目中的实现

公司目前在做一个任务宝的项目，主要是用公众号举行一些活动，通过公众号推送活动的海报，海报上面附有公众号的二维码，当用户扫码进入公众号以后，提示用户需要完成一定数量的分享即可免费赠送相关礼品等等，活动的主要目的是为了涨粉。

其中在生成海报时，为了方便后台人员操作，二维码和头像与海报的合成需要做到拖拽定位，效果如下：

两个图片的拖拽实现代码如下：

// 图片拖拽事件
function dragImg(id) {
    // 要拖动的图片
    var obj = document.getElementById(id);
    // 图片的父容器
    var objBox = $(obj).parent();
 
    // 点击时鼠标相对于拖拽图片右上角的距离
    var distanceX = 0;
    var distanceY = 0;
 
    // 对象拖动时
    obj.onmousedown = function (ev) {
 
        var myEvent = ev || event;
 
        // 初次图片相对于窗口左上角的位置
        var where = obj.getBoundingClientRect();
        var left = where.left;
        var top = w