拖放 css 缩放

Question

昨天我的拖放有问题。感谢 EdenSource 的快速帮助。

今天我想放大out/in。我为此使用 css3 缩放。

在这个fiddle你看到我的问题了。如果您尝试移动具有 jQuery ui 可拖动的元素，则助手位于另一个位置作为我的 coursor。

这是我的 javascript 代码：

$(document).ready(function() {
    $(".card").draggable({   helper: "clone",
                             cursorAt: { top: 76, left: 101 },
                             opacity: 0.5,
                             scroll:true,
                             refreshPositions: true,
                            scrollSensitivity: 100});
    $(".card__dropzone--inner").droppable({
        activeClass: "card__dropzone--active",
        over: function(event) {
            $(this).animate({
                width: "250px"
            }, 200);
            console.log("over");
        },
        out: function(event) {
            console.log("now?!");
            $(event.target).animate({
                width: "25px"
            },200);
            console.log("out");
        },
        drop: function(event) {
            console.log("drop");
        }
    });
});

http://jsfiddle.net/mp085ead/2/

如何在使用 css3 缩放时让我的助手回到光标中间？

Answer 1

终于找到解决办法了。

jQuery-UI 无法使用缩放。即使缩放也不是放大对象的最佳方式。

更好的方法是使用像 dragular 或 tweenmax 这样的库。两者都可以 drag/drop 而 css-zoom 不是 1.

但我们决定使用变换比例。