Сделать новый Div перетаскиваемым в Jquery

Question

Я пытаюсь сделать jquery добавить новый div, а затем сделать его перетаскиваемым, но я пытался и смотрю на Google, и я не могу найти здесь ничего, мой код ниже

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

Спасибо

Answer 1

Если вы используете jQuery UI , создайте свой элемент и сделайте его перетаскиваемым:

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

Answer 2

Проблема в том, что вы создаете DIV после того, как пытаетесь сделать его перетаскиваемым.

События jQuery работают только с элементами, существующими на момент запуска Javascript - есть способы обойти это с использованием функций live и delegate - но это не похоже на то, что ваш плагин допускает это.

Так что, если этот код должен остаться прежним, переместите бит, который создает DIV, над перетаскиваемой функцией - и это сработает.

Answer 3

Поскольку некоторые люди упоминали здесь функцию draggable(), которая является функцией пользовательского интерфейса jQuery, вот краткое руководство:

добавьте следующую строку (ссылку на jQuery UI) на свою страницу .html, внутри головы или внизу тела:

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

теперь, чтобы сделать #draggable draggable, вы пишете в своем скрипте (ваш скрипт или ссылка на него должна идти после ссылки на jQuery UI):

$('#draggable').draggable()

Answer 4

Я не пробовал, но это должно работать:

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

Вы хотите создать div, позволить браузеру добавить его в дерево DOM, а затем вызвать функцию draggable.