javascript - 拖放到缩放的元素上

Question

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

Answer 1

如果我正确理解您的目标，那么您需要处理许多事情。

1.相对位置

当 HTML 元素的父元素发生变化(即元素被附加到其他元素)时，它在屏幕上的位置会发生变化，除非它 position属性是 fixed (这不是默认值)。
所以当你附加你的 div至$('.formBackground') (我只称它为 formBackground )，它的位置变为相对于它的前一个兄弟，或者，如果没有前一个兄弟，则到 formBackground本身。
要解决此问题，您必须减去 formBackground 的偏移量。从可拖动的偏移量。
此外，您需要设置 position至absolute ，所以可拖动的总是相对于 formBackground 呈现而不是以前的可拖动。

The CSS position property is explained here .

为此，请删除此段落( fiddle 中的第 19-22 行):

$(objName).css({
    "left": pos.left,
        "top": pos.top
});

而是在 element.addClass("tempclass"); 之后添加以下段落(目前第 43 行):

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

接下来要注意的是:

2.偏移缩放

如果现在你会设置 var percent = 1.0;在第 1 行中，可拖动对象应该准确地停留在它所在的位置。
然而，对于任何其他因素，它不会，因为它的偏移量也成倍增加。

The CSS transform property and its scale() value are explained here ，但是文档没有提到这也适用于对象的偏移量，它似乎就是这样。

您可以简单地编辑上面的片段来划分 left和 top通过 percent :

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

现在，无论 percent 是什么，可拖动对象的左上角应该始终保持在您放置它的位置。被设定为。

我 fork 并编辑了你的 fiddle 以反射(reflect)这两个变化。由于我还没有 10 个声望，所以我不能发布超过 2 个链接，但无论如何都在这里: http://jsfiddle.net/n7yns9eq/2/
3.(可选)左上锚定变换

我发现将元素的“引用点”作为它们的中心而不是它们的左上角更加用户友好。这对我来说似乎更直观。如果您也发现了这种情况，请按以下步骤操作:

来自 left/ top您必须将金额的一半减去 width/ height将增加。在代码中:

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)你 不能使用 element , 因为 element此时尚未呈现，因为它没有为 height 设置显式值, element.height()将返回 0 .

fiddle : http://jsfiddle.net/9xbgqdeo/1/
4.死区和非比例移动

我注意到的另一个问题是，现在，如果您将可拖动对象放在 formBackground 的最左三分之一的下方。 ，下降不会发生。我不知道这是由浏览器引擎(不调整对象的功能区域大小)还是由 jquery(忽略转换)引起的。
我能想到的解决此问题的唯一方法是制作 body可丢弃而不是 formBackground ，检查是否在 formBackground的范围内如果是，请将其附加在那里，否则将其丢弃。
请注意，如果您的页面没有填满整个浏览器窗口，则要使其正常工作，您必须设置以下 CSS:

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

并且不要忘记更换每个 this在带有 $('.formBackground') 的可放置函数中.

此外，当从 formBackground 抓取现有的可拖动对象时并移动它，它会从光标上移开，我认为这是不需要的。为了防止这种情况，我建议将 div 移回其原始父级，并恢复在 formBackground 上删除它时所做的偏移更改。 .

老实说，我现在懒得为这两个更改提供 fiddle (编辑: http://jsfiddle.net/gtc17z6b/1/)，但我希望这无论如何都能解决你的问题。