Créer une nouvelle Div Draggable à Jquery

Question

Je suis en train de faire jquery ajouter de nouvelles div puis faire draggable mais je l'ai essayé et à la recherche sur Google et je ne peux pas trouver quoi que ce soit 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

Answer 1

Si vous utilisez jQuery UI, créez votre élément et faire draggable:

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

Answer 2

Je ne l'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 voulez créer le div, laisser le navigateur ajouter à l'arborescence DOM, puis appeler la fonction draggable.

Answer 3

Le problème ici est que vous créez le DIV après avoir essayé de le rendre déplaçable. Les événements jQuery ne fonctionnent que sur les éléments qui existent au moment de l'exécution du Javascript - il y a des façons de contourner cela en utilisant les fonctions live et delegate - mais il ne semble pas que votre plugin le permette.

Donc, si ce code doit rester le même, déplacez le bit qui crée le DIV au-dessus de la fonction draggable - et cela fonctionnera.

Answer 4

Comme certaines personnes ont mentionné la ici fonction draggable(), qui est une fonction jQuery UI, voici une courte façon à:

ajoutez la ligne suivante (une référence à jQuery UI) à votre page .html, dans la tête ou au bas du corps:

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

maintenant, de faire draggable #draggable vous écrivez dans votre script (votre script ou la référence à elle doit venir après la référence à jQuery UI):

$('#draggable').draggable()