L'interface utilisateur de jQuery réactive le glissement dans une nouvelle fonction après la désactivation

Question

Je travaille sur une application qui nécessite un glisser-déposer. Lors de la chute, le draggable sélectionné doit rester présent mais devenir désactivé. Ensuite, le nouvel élément "déposé" est ajouté avec un bouton "fermer". En cliquant sur le bouton de fermeture, l'objet disparaît de la zone "droppable" et se réactive en tant que draggable. Le problème est qu'une fois que j'ai désactivé le draggable (après une chute réussie), je ne peux pas réactiver cet élément unique dans ma fonction 'remove' séparée. Voici quelques exemples de code - beaucoup d'entre eux sont retirés à des fins de simplicité dans l'espoir d'obtenir des conseils sur ces questions particulières que j'ai.

// DROP: initiate droppables 

    $(".droppable").droppable({ 
      hoverClass: 'drag-state-hover', 
      accept: '.draggable li img', 
      tolerance: 'fit', 
      drop: function(event, ui) { 

       var elementID = $(ui.draggable).attr("id") // get the dynamically set li id for each list item chosen 

       if( $(this).children('img').attr('src') == 'images/elements/blank.gif' ) { 

        // disable the element once it's been dragged and dropped 
        $(ui.draggable).draggable('option', 'disabled', true); 
        // turn on the remove link 
        $(this).find('a.remove').toggle();          

       }                   

      }                    
     });  



    // ITEM REMOVE: function for removing items 
    $('.remove').click(function(e) { 

      var targetID = $(this).parent('li').attr('id'); 
      $('#' + targetID).children('img').draggable('option', 'disabled', false); 

      e.preventDefault(); 

     }); 

J'ai aussi essayé ce sans succès ...

// ITEM REMOVE: function for removing items 
$('.remove').click(function(e) { 

     var targetID = $(this).parent('li').attr('id'); 

     $(".droppable").droppable({ 
      hoverClass: 'drag-state-hover', 
      accept: '.draggable li img', 
      tolerance: 'fit', 
      drop: function(event, ui) {       
       $(ui.draggable).draggable('option', 'disabled', false);             
      }                    
     });                

     e.preventDefault(); 

    }); 

J'ai passé des jours de recherche sur Google pour trouver une solution, mais je me cogner la tête à ce moment. Toute aide serait grandement appréciée. Merci!!

Answer 1

Dans votre fonction de suppression, avez-vous essayé de ré-instancier l'élément en tant que glisser-déplacer? $('#' + targetID).children('img').draggable{}

Answer 2

Plutôt que d'utiliser .draggable('option', 'disabled', false);, vous pouvez utiliser .draggable('enable');. Je ne sais pas si cela va résoudre votre problème, mais c'est comme ça que je commencerai à le déboguer.