拖放到缩放元素上

时间：2015-01-20 16:36:48

标签： javascript jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

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

2 个答案:

答案 0 :(得分：6)

如果我正确理解你的目标，你需要处理很多事情。

1。相对位置

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

The CSS position property is explained here

要做到这一点，请删除此段落（小提琴中的第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。偏移缩放

如果现在你要在第1行设置var percent = 1.0;，那么可拖动的应该保留在它的确切位置 然而，对于任何其他因素，它不会，因为它的偏移也是相乘的。

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是什么，可拖动的左上角应始终保持在您放置的位置。

我分叉并编辑了你的小提琴以反映这两个变化。由于我还没有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
});

请注意， {strong}不能}而不是$(ui.draggable)，因为element此时尚未呈现，因为它没有明确的值设置对于element，height将返回element.height()。

小提琴：0

4。死区和非比例移动

我注意到的另一个问题是，现在，如果你在http://jsfiddle.net/9xbgqdeo/1/的最左边三分之一的较低位置放下一个拖拽，则不会发生掉落。我不知道这是由浏览器引擎（不是调整对象的功能区域）还是由jquery（忽略转换）引起的。
我可以考虑解决此问题的唯一方法是使formBackground可放置而不是body，检查它是否在formBackground的边界内，如果是，则将其附加到此处，丢弃否则。
请注意，如果您的页面未填满整个浏览器窗口，则必须设置以下CSS：

formBackground

并且不要忘记使用html, body { width: 100%; height: 100%; } 替换droppable函数中的每个this。

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

老实说，我现在懒得为这两个变化提供小提琴（编辑：formBackground），但我希望这无论如何都能解决你的问题。

答案 1 :(得分：0)

我将看一下这个库：

https://greensock.com/draggable

它确实以正确的方式处理了水垢和变形：

http://codepen.io/gavrochelegnou/pen/KpWVqo

像喝一杯水一样容易：

Draggable.create(".box", {type:"x,y", edgeResistance:0.65, bounds:".container", throwProps:true});
相关问题
最新问题