jQuery UI draggable - supprimer le clone si un dépôt valide a eu lieu

Question

J'essaie de faire fonctionner quelque chose comme ce qui suit, mais je ne trouve pas la bonne façon d'utiliser l'événement stop pour cela.

J'ai deux colonnes dans lesquelles vous pouvez glisser de la droite vers la gauche. La fonction d'inversion fonctionne correctement si le dépôt n'est pas valide, mais je veux supprimer l'élément dans la colonne de droite si un dépôt valide s'est produit dans la colonne de gauche. Je sais que le conditionnel n'est pas correct mais je ne sais pas quel indicateur rechercher pour déterminer si le dépôt était valide.

$("#sortable2 li").draggable({
        connectToSortable: "#sortable1",
        helper: "clone",
        revert: "invalid",
        stop: function (event, ui) {
            if (drop == "valid") 
            { 
               $(this).remove(); 
            }
        }
    });

Answer 1

Vous pouvez supprimer l'élément original à l'aide de la fonction receive sur l'événement .sortable

exemple jsfiddle

$("#sortable1").sortable({
    receive: function (event, ui) { // add this handler
        ui.item.remove(); // remove original item
    }
});

$("#sortable2 li").draggable({
    connectToSortable: "#sortable1",
    helper: "clone",
    revert: "invalid"
});

Answer 2

Pour commencer, vous pouvez comparer les différences entre événement-début y événement-arrêt . Utilisez un débogueur pour accéder à la fonction d'événement et vous verrez la différence entre les deux.

Answer 3

Si vous ne triez rien et que vous souhaitez que l'élément d'origine soit supprimé car le dépôt est valide, vous pouvez simplement supprimer l'élément helper:"clone" .

$("#sortable2 li").draggable({
    revert: "invalid",
});