1

一連のドラッグ可能な画像といくつかのドロップ可能なフォルダがあります。私はウェブを見回しましたが、ドラッグ可能なものをドロップ可能なものにドロップすると、ドロップ可能な領域にスケールダウンしてフェードアウトするエフェクトを作成する方法でプラグイン/コードを見つけることができません。

基本的に、アイコンを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"
                                    });
                                }


                            })
                        );
4

1 に答える 1

5

jQueryを使用してアニメーションを作成できます。

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

このようなものがあなたが探していたものであることを願っています。

于 2012-07-01T20:52:00.857 に答える