1

我有许多要拖放到文件夹中的带有图像的可拖动文件。为了节省空间（并一次在屏幕上显示更多可拖动对象），我在拖动过程中使用 CSS 隐藏图像。当图像消失时，如何将鼠标保持在可拖动状态？

这是我所看到的示例，仅使用了一个简单的可拖动框：

$( "#draggable" ).draggable({
    revert: "invalid",
    cursor: "move",
    scroll: false,
    cursorAt: { top: 5, left: 5 },
    start: function(event, ui) {
        $('img').addClass('hidden');
    },
    stop: function(event, ui) {
        $('img').removeClass('hidden');
    }
});

http://jsfiddle.net/fBPdF/

该类hidden用于display:none;隐藏图像。正如您在小提琴中看到的那样，拖动第一个图像可以正常工作，并且在您拖动时鼠标会沿着框的左上角移动。当您拖动第二个时，鼠标会飘到一边，因为在删除图像时已经设置了 cursorAt 值。

我不想使用辅助克隆（因为这会使移动看起来更像是副本），但这是我迄今为止发现的唯一让它起作用的方法。我尝试在启动函数的超时内重置 cursorAt，但它似乎没有效果。

有没有办法让光标和可拖动的东西以某种方式保持在一起？

4

1 回答 1

1

尝试改变不透明度。隐藏的属性从“索引”中取出元素。

.hidden {
    opacity: 0;
}

http://jsfiddle.net/eEgTL/

于 2013-05-09T18:17:05.963 回答