JQuery conserve la capacité de glisser lorsque l'élément est supprimé

Question

J'essaie de déplacer un élément déplaçable dans le DOM, mais chaque fois que j'essaye replaceWith() ou remove() ou des fonctions similaires, sa glissabilité est perdue.

Est-il possible de faire en sorte qu'un élément ne perde pas sa capacité de glissement lorsqu'on le déplace dans le DOM?

Answer 1

La solution est de ne pas utiliser jQuery pour déplacer les éléments, mais d'utiliser le DOM pur.

C'est, au lieu de

$('#elem').remove().appendTo($('#elem2')) 

do

var q = $('#elem'); var el = q.get(0); el.parentNode.removeChild(el); $('#elem2').appendChild(el); 

Je ne sais pas s'il est recommandé, mais il fonctionne.

Answer 2

pourquoi ne pas vous essayez de créer le comportement draggable à nouveau une fois que vous déplacez dans le DOM:

function xyz(){ 
    //move your stuff 
    //create the draggable again 

    $(element).draggable(); 
} 

Answer 3

Non, il est impossible de préserver draggability lorsque vous remplacez/supprimer des éléments dans les DOM, à moins que vous modifier le noyau jquery (que je ne recommande pas.)

Si vous faites replaceWith() et remove() pour les éléments DOM, cela signifie qu'ils sont détruits et que tous les comportements ou événements qui leur sont associés sont également détruits.

Essayez de créer un <div> externe qui contient le comportement draggable et au lieu de remplacer le code HTML dans le div lorsque vous voulez changer l'élément draggable à goutte, etc.

Alternativement (et moins élégant), vous pouvez appeler à nouveau draggable() sur vos éléments après votre faire replaceWith() pour restaurer le comportement que vous avez supprimé avec replaceWith().

De même, au lieu de remove(), essayez hide() de faire simplement disparaître les éléments pendant un certain temps tout en conservant leur comportement.

En bref: Vous abordez le problème de manière incorrecte. Changez votre approche.