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

Я пытаюсь сделать 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"); 
              }

спасибо

7
drag-and-drop draggable html jquery

4 ответов

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

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

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

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

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

3

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

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, затем вызовите

0

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

добавьте следующую строку (ссылку на 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()
0