Jquery-ui có thể kéo và động Jquery-ui có thể kéo được không?

này được mã của tôi lấy từ http://jqueryui.com/demos/draggable/Jquery-ui có thể kéo và động Jquery-ui có thể kéo được không?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Draggable - Default functionality</title> 
    <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css"> 
    <script src="../../jquery-1.6.2.js"></script> 
    <script src="../../ui/jquery.ui.core.js"></script> 
    <script src="../../ui/jquery.ui.widget.js"></script> 
    <script src="../../ui/jquery.ui.mouse.js"></script> 
    <script src="../../ui/jquery.ui.draggable.js"></script> 
    <link rel="stylesheet" href="../demos.css"> 
    <style> 
    .draggable { width: 150px; height: 150px; padding: 0.5em; } 
    </style> 
    <script> 
    $(function() { 
    $(".draggable").draggable(); 
    $('.content').click(function(){ 
    var htmlData='<div class="draggable ui-widget-content  ui-draggable"><p>Drag me around</p></div>'; 
    $('.demo').append(htmlData); 
    }); 
    }); 
    </script> 
</head> 
<body> 
    <div class="demo"> 
    <div class="draggable ui-widget-content"> 
    <p>Drag me around</p> 
    </div> 
    <div class="content">Test </div> 
    </div><!-- End demo --> 
</body> 
</html>

Iam làm thành phần có thể kéo động như bạn có thể nhìn thấy trong chức năng iam sử dụng thêm. Nhưng đối tượng drggable mới được tạo ra không phải là kéo mặc dù tôi đã đưa ra các lớp jquery-ui tạo ra.

Nguồn

2011-10-05 Human Love

thử gọi $(".draggable").draggable(); khi phần tử được tạo động được thêm vào.

$(function() { 
    $(".draggable").draggable(); 
    $('.content').click(function(){ 
     var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>'; 
     $('.demo').append(htmlData); 
     $(".draggable").draggable(); 
    }); 
});

Working Demo

Nguồn

2011-10-05 11:37:48

cám ơn sau khi gọi kéo một lần nữa giải quyết vấn đề cảm ơn rất nhiều cho bạn. Cảm ơn rất nhiều. –

Đừng quên bao gồm mã của bạn để tham khảo trong tương lai. – Jeffrey

hoạt động này .. +1 –

<script> 
    $(function() { 
     $(".draggable").draggable(); 
     $(".content").click(function(){ 
      var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>'; 
      $(".demo").append(htmlData); 
     }); 
    }); 
</script>

Chỉ cần một nhu cầu cho vị trí thay đổi là cần thiết

<script> 
    $(function() {  
     $(".content").click(function(){ 
      var htmlData='<div class="draggable ui-widget-content ui-draggable"><p>Drag me around</p></div>'; 
      $(".demo").append(htmlData); 
      $(".draggable").draggable(); //bring it here so that for the newly inserted/created dom elements, jquery draggable can be initialized. 
     }); 
    }); 
</script>

Nguồn

2012-01-15 17:49:32

Tôi thực sự sẽ nói vì lý do hiệu suất, để thay vào đó sử dụng:

$('.draggable:not(.ui-draggable)').draggable();

Điều này sẽ ngăn không cho khởi tạo lại các phần tử có thể kéo bằng cách sử dụng lớp dựng sẵn của jQuery UI. Ngoài ra, nếu mã của bạn xuống đường sửa đổi các thuộc tính của một hình thu nhỏ riêng lẻ có thể không khớp với các thuộc tính của một hình kéo mới, bạn có thể kết thúc với một số được đặt lại.

Không có gì sai khi được cụ thể với jQuery.

CẬP NHẬT

Không chỉ định cho các trường hợp mà sử dụng điều này. Dựa trên chỉnh sửa của Ricardo:

$(function() { 
    $(".draggable").draggable(); 
    $('.content').click(function(){ 
     var htmlData='<div class="draggable ui-widget-content"><p>Drag me around</p></div>'; 
     $('.demo').append(htmlData); 
     $('.draggable:not(.ui-draggable)').draggable(); //Here 
     }); 
    });

Tôi cũng thấy bạn đã thêm lớp có khả năng kéo theo cách thủ công. Bạn không cần phải làm điều đó. Trong thực tế, nó làm cho những gì tôi nói không hoạt động.

Nguồn

2012-01-18 01:11:28

tôi sẽ khuyên bạn nên làm nó như thế này bởi vì nếu bạn muốn vượt qua một đối tượng cấu hình với chức năng kéo, bạn sẽ không phải lặp lại nó ở hai nơi khác nhau:

<script> 
    $(function() { 
     setDraggable(); 

     $('.content').click(function(){ 
     var htmlData='<div class="draggable ui-widget-content  ui-draggable"><p>Drag me around</p></div>'; 
     $('.demo').append(htmlData); 

     setDraggable(); 
    }); 
    }); 

    function setDraggable(){ 
     $(".draggable").draggable(); 
    } 
</script>

Nguồn

2016-02-14 12:23:06 user3791372

Jquery-ui có thể kéo và động Jquery-ui có thể kéo được không?

Trả lời

Các vấn đề liên quan