Faire de Nouveaux Div Déplaçable en Jquery

Je suis en train de faire jquery ajouter de nouveaux div et ensuite de la faire déplaçable, mais j'ai essayé et cherche sur google et je ne trouve rien voici mon code ci-dessous

 $(document).ready(function() {

 $("#draggable").draggable({ 
   containment: 'parent',
   handle: 'drag_border',
   drag: function(e, ui) {
          var top = ui.position.top;
          var left = ui.position.left;
          $("#top").html(top);
          $("#left").html(left);
           }
       }); 
   });

       function New_Text() {   
            $("<div id=\"draggable\" style=\"width: 200px; height: 50px; border:dashed thin; background-color: #fff\">Drag me</div>").appendTo("div#drag_border"); 
              }

Merci

C'est juste un extrait de code, pourriez-vous poster plus de code de sorte qu'il est plus facile à déboguer?
Pouvez-vous faire la div lorsque la page est chargée, et l'ont caché jusqu'à ce qu'il est nécessaire?
Je crois que le problème, c'est qu'il crée de la div, plus tard, de sorte que le gestionnaire d'événement n'est pas attaché à la div, et je ne pense pas que le live de la fonction va travailler pour cela, mais c'est à peu près ce dont il a besoin.
Ce que je voulais dire, c'est de mettre le code html pour que je puisse trouver plus facilement le problème. Parfois, je ne suis pas très bon d'expliquer 😛

OriginalL'auteur Rickstar | 2010-08-21

  1. 11

    Si vous utilisez jQuery UI, puis de créer votre élément et de le rendre déplaçable:

    $("<div />").draggable();

    OriginalL'auteur cllpse

  2. 3

    Le problème ici c'est que vous êtes en train de créer un DIV après que vous avez essayé de le rendre déplaçable.

    jQuery événements ne fonctionne que sur les éléments qui existent à l'heure que le Javascript est exécuté, il existe des moyens de contourner cela en utilisant le live et delegate fonctions - mais il ne ressemble pas à votre plugin permet que.

    De sorte que si le code doit rester le même, de déplacer les bits qui crée un DIV au-dessus de la fonction draggable - et ça marchera.

    OriginalL'auteur iblamefish

  3. 0

    Je n'ai pas essayé, mais cela devrait fonctionner:

    function New_Text() {   
  $("<div id=\"draggable\" style=\"width: 200px; height: 50px; border:dashed thin; background-color: #fff\">Drag me</div>").appendTo("div#drag_border"); 
        setTimeout(function() {
           ...
          });

         }, 10);
   }

    Vous souhaitez créer une div, laisser le navigateur de l'ajouter à l'arborescence DOM, puis d'appeler le draggable fonction.

    OriginalL'auteur James Black

  4. 0

    Puisque certaines personnes mentionnées à l' draggable() fonction ici, qui est un jQuery UI fonction, voici un petit how-to:

    ajouter la ligne suivante (une référence à jQuery UI) pour votre .page html, à l'intérieur de la tête ou dans le bas du corps:

    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

    maintenant, pour faire de #déplaçable déplaçable vous écrivez dans votre script (le script ou la référence à l', il doit venir après la référence à jQuery UI):

    $('#draggable').draggable()

    OriginalL'auteur