我有一系列可拖动的图像和一些可放置的文件夹。我环顾了网络,找不到任何插件/代码来创建一种效果,在这种效果中,当可拖动对象被放到可放置对象上时,它会向下缩放到可放置区域并淡出。
基本上,类似于将图标拖到 OSX 中的文件夹中。我试图向用户提供图像已添加到文件夹的视觉反馈。
我应该补充一点,我不想从屏幕上移除/移动可拖动对象。我正在使用“克隆”来提供正在进行拖动的视觉反馈。
有什么建议/代码/想法吗?
更新
在查看 jquery 中的 clone() 时做了更多工作。我想出了以下内容,但是克隆的位置似乎很随机。理想情况下,我希望在执行动画时将克隆定位在 droppable 上。
$('#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();
}
我希望您正在寻找这样的东西。
关于javascript - 将 jQuery Draggable 放入 droppable 时缩放/动画化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11285469/