我有一个div元素，我希望能够将其拖到缩放的元素上。但是，当我这样做时，div 元素不会转到元素的正确坐标，但当我第二次拖动它时它会。

我也认为当元素被添加时它会扩大规模，我想尝试避免这种情况。

谁能帮我解决这个问题？（尤其是整个没有去正确的地方的事情）

我已经尝试过这样的事情来获取div 的实际坐标，但我不确定如何将其转换为可拖动元素，因为当我拖动某些内容时mousemove不起作用。

$("body").on("mousemove", ".formBackground", function(e){
    div_x = (e.offsetX != null) ? e.offsetX : e.originalEvent.layerX;
    div_y = (e.offsetY != null) ? e.offsetY : e.originalEvent.layerY; 
    console.log("x "+div_x+" y "+div_y); 
});

这是我的实际代码和指向我的JSFIDDLE的链接

.HTML

<div id="drag1" class="drag" style="font-size:12px;background-color:#E2F4FE;width:220px;padding:10px;color:#000;font-weight:normal;">New box</div>
<br />
<br />
<div id="formBox">
    <div id="formScale">
        <div class="formContent">
            <div class="formBackground" style="background-image:url('http://i.imgur.com/roOQNaS.png');"></div>
        </div>
    </div>
</div>

.JS

var percent = 1.5;
$("#formScale").css({
    'transform': 'scale(' + percent + ')',
        '-moz-transform': 'scale(' + percent + ')',
        '-webkit-transform': 'scale(' + percent + ')',
        '-ms-transform': 'scale(' + percent + ')'
});
var counter = 0;
//Make element draggable
$(".drag").draggable({
    helper: 'clone',
    containment: 'frame',
    //When first dragged
    stop: function (ev, ui) {
        var pos = $(ui.helper).offset();
        objName = "#clonediv" + counter
        $(objName).css({
            "left": pos.left,
                "top": pos.top
        });
        $(objName).removeClass("drag");
        //When an existiung object is dragged
        $(objName).draggable({
            containment: 'frame',
            stop: function (ev, ui) {
                var pos = $(ui.helper).offset();
                console.log($(this).attr("id"));
                console.log(pos.left)
                console.log(pos.top)
            }
        });
    }
});

$(".formBackground").droppable({
    drop: function (ev, ui) {
        if (ui.draggable.attr('id').search(/drag[0-9]/) != -1) {
            counter++;
            var element = $(ui.draggable).clone();
            element.addClass("tempclass");
            $(this).append(element);
            $(".tempclass").attr("id", "clonediv" + counter);
            $("#clonediv" + counter).removeClass("tempclass");
            //Get the dynamically item id
            draggedNumber = ui.draggable.attr('id').search(/drag([0-9])/)
            itemDragged = "dragged" + RegExp.$1
            console.log(itemDragged)
            $("#clonediv" + counter).addClass(itemDragged);
        }
    }
});

.CSS

#formBox {
    position:relative;
}
#formScale {
    border:1px solid red;
    position:relative;
    width:350px;
    height:200px;
    margin:0;
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    transform-origin: 0 0;
    -ms-transform-origin: 0 0;
}
.formContent {
    position:absolute;
    width:100%;
    height:100%;
}
.formBackground {
    width:100%;
    height:100%;
    background-size:contain;
    background-position:center;
    background-repeat:no-repeat;
}