jQuery les droppables - Changer l'élément sur la chute de la

Je suis un peu nouveau pour jQuery et espère que quelqu'un peut m'aider.

J'essaye de modifier un élément (li) à un autre élément (div) après (li) a été supprimée.

Exemple de code:

$("#inputEl>li").draggable({ 
    revert: true, 
    opacity: 0.4,
    helper: "clone"
});
$("#dropEl")
    .droppable({ 
        accept: ".drag",
        hoverClass: "dropElhover",
        drop: function(ev, ui) {
            //change the li element to div here
        }
});

Le problème c'est que quand j'utilise

drop: function(ev, ui) {
     $(ui.draggable).replaceWith("<div>Some content</div>");
}

l'original déplaçable éléments sera désactivée lorsque la fonction ci-dessus est déclenchée.

J'utilise la dernière jQuery et jQuery UI versions stables.

OriginalL'auteur aeran | 2008-11-14

  1. 3

    Donc, ce que vous voulez est de garder votre liste d'origine intact et déposer des éléments de liste dans dropEl?
    Comment à ce sujet:

    drop: function(ev,ui) {
     $(this).append("<div>Some content</div>");
}

    Ou, si vous souhaitez remplacer les éléments de la liste avec un élément div et également l'élément div déplaçable, vous pouvez essayer ceci:

    drop: function(ev, ui) {
        $(ui.draggable).replaceWith("<div>Some content</div>");
        $("#inputEl>div").draggable({ 
            revert: true, 
            opacity: 0.4,
            helper: "clone"
        });
    }

    L'original déplaçable d'appel rend seulement des éléments déplaçables à la fois, il est appelé. Si vous modifiez ou ajoutez des éléments et que vous souhaitez être déplaçable, vous aurez besoin d'appeler le draggable() la fonction de nouveau.

    OriginalL'auteur Ben Koehler

  2. 1

    merci pour la réponse.

    Votre premier code a travaillé, et en plus je pouvez également trier les divs dans le drop, comme ceci:

        drop: function(ev, ui) {
    $(this).append("<div>Some content</div>");
    $("#dropEl").sortable();
}

    Maintenant, le problème est de savoir comment puis-je savoir qui liste qui, une fois j'ai changé pour des divs

    J'utilise le code suivant pour obtenir chaque élément id:

    drop: function(ev, ui) {
            revert: true;
            var this_id = $(ui.draggable).attr("id");
            $(this).append('<div id="'+this_id+'">Some content</div>');
            $("#dropEl").sortable();
        }

    OriginalL'auteur