Question

Im essayant de créer une page dans laquelle les utilisateurs peuvent rechercher des éléments sur le côté gauche de la page, et glisser-déposer les éléments qu'ils veulent sur le droit, un peu comme un panier d'achat.

J'utilise

 $(function() {
 $(".result").draggable({
    helper: function(event, ui) {
    return $(this).clone().children("img");
    }
    });

    $("#rightcol").droppable({
        accept: ".result",
        drop: function(event,ui){
        $(this).append($(ui.draggable).clone());
        //console.log($(ui.draggable));
        }
        });

});

pour le drag & drop qui fonctionne comment j'espérais, mais quel que soit l'utilisateur fait glisser sur le côté droit (#rightcol) est perdu quand est soumis une nouvelle recherche. J'ai essayé de changer la forme de soumettre à une utilisation avec ajax jquery comme ceci

 $(document).ready(function() {
          $("#form").submit( function () {    
          $.post(
           'p_search.php',
            $(this).serialize(),
          function(data){
              //data is what i want to be draggable
              //call other function here
              $(".build").html(data).load();
            }
          );
          return false;   
        });   

 });

Ce qui fonctionne très bien, mais les divs (.result) ne sont pas draggable. Est-il possible d'initialiser facilement les éléments (.result) sans rafraîchir la page?

Était-ce utile?

La solution

Je crois qu'ils ne sont pas draggable parce qu'ils ont été créés après vous avez défini quels éléments sont draggable.
(Ce qui signifie -. Ils sont créés après l'appel $(".result").draggable(...)
Je pense que vous devriez jeter un oeil à en direct ()

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top