jquery - 使用 css 缩放拖放

Question

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

今天我想缩小/放大。我为此使用 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 缩放时让我的助手回到我的 coursor 中间？

Answer 1

终于找到了解决办法。

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

更好的方法是使用像 dragular 或 tweenmax 这样的库。当 css-zoom 不是 1 时，两者都可以拖放。

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