1

以前の質問から、ドロップされた後に画像を正常に複製する素晴らしい解決策があります。

コードは次のとおりです。

$(function() {
var makeDraggable = function(element) {
    element.draggable({ 
        revert: "invalid",
        appendTo: "#droppable",
        helper: "clone" 
    });
}
$( "#droppable" ).droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        var newClone = $(ui.helper).clone();
        makeDraggable(newClone);
        $(this).after(newClone);
    }
});
// Initalise the program by making first draggable:
makeDraggable($(".draggable img"));

しかし、問題は、ターゲット領域で一度に 1 つの画像だけを表示したいことです。しかし、現在、ドロップされたすべての画像が表示されています。

より具体的には、ユーザーがターゲット領域に画像をドロップし、後で別の画像をドラッグすると、前の画像がドロップまたはターゲット領域から削除され、新しい画像のみがターゲット領域に表示されます。このデモを参照してください: jsFiddle の例

これを解決するにはどうすればよいですか?

4

3 に答える 3

1

droppable他の回答のように単にターゲット領域を空にするのではなく、ドロップされたアイテムにクラスを追加しdragstart、 new のイベントでそれらを削除しますdraggablefadeOut()また、新しいドラッグ可能オブジェクトが選択されたときに、ちょっとしたイベントを追加すると便利です。ただし、Ishettylが指摘しfadeIn()たように、ユーザーがドラッグ可能な要素をドロップしないことにした場合は、要素を再度作成する必要があります。これは、カスタムrevert関数を使用して行うことができます (以下を参照)。

結果は次のようになります。

ここに画像の説明を入力

私の意見では、これはよりエレガントに見え、より多くのアイテムが許可されているかどうかでユーザーを混乱させません。

コード

$(function() {
    $(".draggable img").draggable({ 
        revert: function (socketObj) {
            if (!socketObj) {
                if ($(this).hasClass("droppedItems")) {
                    $(this).fadeOut(function() {
                        $(this).remove();
                    });
                } else {
                    $(".droppedItems").fadeIn();
                    return true;   
                }
            }
        },
        helper: "clone",
        start: function(event, ui) {
            $(".droppedItems").fadeOut();
        }
    }); 
    $( "#droppable" ).droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function(event, ui) {
            $(".droppedItems").remove();
            var newClone = $(ui.helper).clone();
            newClone.addClass("droppedItems");
            $(this).append(newClone);
        }
    });
});

デモ

于 2015-07-04T15:06:19.343 に答える
1

以下のコードを使用して、クローンを次々に追加していました。

$(this).after(newClone);

以下のように、ドロップ可能なコンテナーを空にしてから、新しいクローンを追加するだけです。

drop: function(event, ui) {
    var newClone = $(ui.helper).clone();
    makeDraggable(newClone);
    $(this).empty().append(newClone);
}

更新されたフィドル

于 2015-07-04T14:44:42.923 に答える