Crear nueva Div se pueden arrastrar en Jquery

Question

que estoy tratando de hacer jQuery añadir nueva div y luego hacer que se pueda arrastrar, pero he estado tratando y buscando en google y no puedo encontrar cualquier cosa aquí es mi código de abajo

$(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"); 
       } 

Gracias

Answer 1

Si está utilizando jQuery UI, a continuación, crear un elemento y hacer que se pueda arrastrar:

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

Answer 2

yo no lo he probado, pero esto debería funcionar:

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); 
    } 

desea crear el div, dejar que el navegador agregarlo al árbol DOM, a continuación, llamar a la función draggable.

Answer 3

El problema aquí es que está creando el DIV después de haber intentado hacerlo arrastrable.

Los eventos de jQuery solo funcionan en los elementos que existen en el momento en que se ejecuta el Javascript. Hay formas de evitar esto usando las funciones live y delegate, pero no parece que tu complemento lo permita.

Así que si ese código debe seguir siendo el mismo, mueva el bit que crea el DIV arriba de la función que se puede arrastrar, y funcionará.

Answer 4

Dado que algunas personas mencionan la función draggable() aquí, que es una función de jQuery UI, aquí es un corto de cómo hacerlo:

añadir la siguiente línea (una referencia a jQuery UI) a su página html, dentro de la cabeza o en la parte inferior del cuerpo:

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

Ahora, para que se pueda arrastrar #draggable se escribe en el script (secuencia de comandos o la referencia a ella deben venir después de la referencia a jQuery UI):

$('#draggable').draggable()