使用 CSS 缩放拖放答案

【问题标题】：Drag and drop with css zoom使用 CSS 缩放拖放
【发布时间】：2015-09-23 11:33:08
【问题描述】：

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

今天我想缩小/缩小。我为此使用 css3 缩放。

在这个小提琴中你看到了我的问题。如果您尝试使用可拖动的 jQuery ui 移动元素，则助手将作为我的游标在另一个位置。

这是我的 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 缩放时让我的助手回到我的游标中间？

【问题讨论】：

标签： jquery css jquery-ui drag-and-drop zooming

【解决方案1】：

终于找到了解决办法。

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

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

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

【讨论】：