缩放/动画 jQuery 拖放到可拖放时可拖动

Scale/Animate jQuery Draggable when dropped into droppable

本文关键字：拖放 拖动 jQuery 缩放 动画      更新时间：2023-09-26

我有一系列可拖动的图像和一些可放置的文件夹。我在网上四处寻找，找不到任何插件/代码来创建一种效果，在这种效果中，当可拖动对象拖放到可拖放对象上时，它会向下缩放到可放置区域并淡出。

基本上，类似于将图标拖到OSX中的文件夹中。我正在尝试向用户提供图像已添加到文件夹的视觉反馈。

我

应该补充一点，我不想从屏幕上删除/移动可拖动的内容。我正在使用"克隆"来提供正在发生的拖动的视觉反馈。

有什么建议/代码/想法吗？

更新

在jquery中查看clone（）时工作了更多。我想出了以下内容，但是克隆的位置似乎非常随机。理想情况下，我希望在执行动画时将克隆放置在可放置对象上。

$('#photoscontainer').append($(r.photos[i].thumbnailhtml).draggable({
                                helper:"clone",
                                stop: function(event,ui){
                                    clone = ui.helper.clone();
                                    $(this).append(clone.addClass('inside-drop-zone').draggable({
                                            containment: '.drop-zone'
                                    }));
                                    clone.animate({
                                        opacity: 0,
                                        width: "0",
                                        height: "0"
                                    });
                                }

                            })
                        );

您可以使用 jQuery 编写动画：

function dropped(elementId) {
    var jId = "#" + elementId;
    $(jId).animate({
        width:'-=50',
        height:'-=50'
    },5000);
    $(jId).fadeOut();
}

我希望这样的东西是你要找的。

相关文章：