Javascript 拖放到缩放的图元上

我有一个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); 
});

这是我的实际代码和我的

HTML CSS

---

如果我正确理解了你的目标，那么你需要注意很多事情

1.相对位置 当HTML元素的父元素更改时（即该元素附加到其他元素上），其在屏幕上的位置将更改，除非它的

位置
属性是
固定的
（这不是默认值）。

因此，当您将
div
附加到
$（'.formBackground'）
（我将其称为
formBackground
）时，它的位置将相对于它以前的同级，或者，如果没有以前的同级，则相对于
formBackground
本身。

要解决这个问题，您必须从拖动表的偏移量中减去
formBackground
的偏移量。

此外，您需要将
位置
设置为
绝对
，以便始终相对于
formBackground
而不是之前的可拖动对象呈现可拖动对象


要做到这一点，请删除这段文字（小提琴中的第19-22行）：

而是在
element.addClass（“tempclass”）之后添加以下段落（当前第43行）：

接下来要注意的是：

2.偏移量缩放
如果现在设置
var center=1.0在第1行中，可拖动设备应保持在原来的位置。

但是，对于任何其他因子，它都不会，因为它的偏移量也是相乘的

，但是文档没有提到这也适用于对象的偏移量，只是看起来是这样

您只需编辑上面的代码段，将
左
和
顶
除以
百分比
：

element.css({
    "position": "absolute",
    "left": (ui.offset.left - $(this).offset().left) / percent,
    "top": (ui.offset.top - $(this).offset().top) / percent
});

现在，无论
percent
设置为什么，拖动表格的左上角应始终保持在您放置它的位置

我分叉并编辑了你的小提琴以反映这两个变化。因为我还没有10个声誉，所以我不能发布超过2个链接，但这里还是有：
http://jsfiddle.net/n7yns9eq/2/

3.（可选）左上角定位的变换
我发现将元素的“参考点”置于其中心而不是左上角更方便用户。对我来说，这似乎更直观。如果您也发现了这一点，以下是如何做到这一点：

从
左侧
/
顶部
您必须用
宽度减去一半的金额
/
高度
将增加。代码：

element.css({
    "position": "absolute",
    "left": (ui.offset.left - $(this).offset().left - $(ui.draggable).width() * (percent - 1) / 2) / percent,
    "top": (ui.offset.top - $(this).offset().top - $(ui.draggable).height() * (percent - 1) / 2) / percent
});

请注意，您不能使用
$（ui.draggable）
而不是
$（ui.draggable）使用
元素
，因为此时尚未渲染
元素
，而且它没有为
高度设置明确的值，
元素.height（）
将返回
0

小提琴：
http://jsfiddle.net/9xbgqdeo/1/

4.死区和非比例移动
我注意到的另一个问题是，现在，如果您在
formBackground
最左边的三分之一的下方放置一个draggable，则不会发生该放置。我不知道这是由浏览器引擎（不调整对象的功能区域）还是jquery（忽略转换）引起的。

我能想到的解决这个问题的唯一方法是将
正文
设置为可拖放，而不是
formBackground
，检查它是否在
formBackground
的边界内，如果是，则将其附加在那里，否则将其丢弃。

请注意，如果您的页面没有填满整个浏览器窗口，则必须设置以下CSS：

html, body {
    width: 100%;
    height: 100%;
}

不要忘记用
$（'.formBackground'）
替换可拖放函数中的每个
this

此外，当从代码<表格背景> /代码>抓取一个现有的可拖动时，它会移动到光标上，这是我认为不需要的。为了防止出现这种情况，我建议将div移回其原始父级，并恢复在
formBackground
上删除div时所做的偏移量更改

老实说，我现在懒得为这两个更改提供提琴（编辑：
http://jsfiddle.net/gtc17z6b/1/
），但我希望这能解决您的问题。
我想看看这个库：


它以正确的方式处理缩放和变换：


就像喝一杯水一样简单：

Draggable.create(".box", {type:"x,y", edgeResistance:0.65, bounds:".container", throwProps:true});

非常感谢Siguza！这非常有帮助，解释了很多。我很难理解光标的最后一部分。我对最后一部分非常感兴趣。如果你能抽出点时间做一把小提琴，那会对我有很大帮助，我会当场给你赏金。在你投入的时间里，你应得的。仍然有一些调试代码，在使用字符串时不一致，使用jquery内部代码，但可以正常工作。如果拖拽物的中心位于盒子内，则该拖拽物现在被视为“盒子内”。如果您想更改，请参阅第56行和第57行。
element.css({
    "position": "absolute",
    "left": ui.offset.left - $(this).offset().left,
    "top": ui.offset.top - $(this).offset().top
});

element.css({
    "position": "absolute",
    "left": (ui.offset.left - $(this).offset().left) / percent,
    "top": (ui.offset.top - $(this).offset().top) / percent
});

element.css({
    "position": "absolute",
    "left": (ui.offset.left - $(this).offset().left - $(ui.draggable).width() * (percent - 1) / 2) / percent,
    "top": (ui.offset.top - $(this).offset().top - $(ui.draggable).height() * (percent - 1) / 2) / percent
});

html, body {
    width: 100%;
    height: 100%;
}

Draggable.create(".box", {type:"x,y", edgeResistance:0.65, bounds:".container", throwProps:true});