Make New Div Draggable trong Jquery

Question

Tôi cố gắng để làm cho jquery thêm div mới và sau đó làm cho nó có thể kéo nhưng tôi đã cố gắng và tìm kiếm trên google và tôi không thể tìm thấy bất cứ điều gì ở đây là mã của tôi dưới đây

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

Cảm ơn bạn

Answer 1

Nếu bạn đang sử dụng jQuery UI, sau đó tạo ra yếu tố của bạn và làm cho nó có thể kéo:

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

Answer 2

tôi đã không thử nó nhưng điều này nên làm việc:

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

bạn muốn tạo div, hãy để duyệt thêm nó vào cây DOM, sau đó gọi các draggable chức năng.

Answer 3

Vấn đề ở đây là bạn đang tạo DIV sau khi bạn đã cố gắng làm cho nó có thể kéo được.

Sự kiện jQuery chỉ hoạt động trên các phần tử tồn tại tại thời điểm Javascript được chạy - có nhiều cách xung quanh việc này bằng cách sử dụng các chức năng live và delegate - nhưng có vẻ như plugin của bạn không cho phép điều đó.

Vì vậy, nếu mã đó cần giữ nguyên, hãy di chuyển bit tạo DIV phía trên chức năng kéo được - và nó sẽ hoạt động.

Answer 4

Kể từ khi một số người đề cập đến draggable() chức năng ở đây, đó là một hàm jQuery UI, đây là một đoạn ngắn như thế nào-to:

thêm dòng sau (một tham chiếu đến jQuery UI) để trang .html của bạn, bên trong người đứng đầu hoặc ở dưới cùng của cơ thể:

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

bây giờ, để làm cho #draggable có thể kéo được bạn viết trong kịch bản lệnh của bạn (tập lệnh của bạn hoặc tham chiếu đến nó phải đến sau tham chiếu đến jQuery UI):

$('#draggable').draggable()