jQuery UI Draggable/Sortable - Các mục được thêm động không thể kéo được

Question

Tôi có một danh sách các danh sách có thể kéo/sắp xếp mà tôi tự động thêm các mục vào, nhưng sự cố là, khi một mục đã được thêm vào, bạn không thể di chuyển chúng vào danh sách mới. Bạn có thể xem chức năng tại đây: http://jsfiddle.net/Y4T32/2/

Kéo một mục từ danh sách có sẵn vào một trong các danh sách mục tiêu và bạn sẽ thấy ý tôi. Bây giờ, hãy thêm "chú thích" và cố kéo mục mới vào một trong các cột mục tiêu.

Tôi tìm thấy câu trả lời khác ở đây hoạt động như tôi muốn, nhưng không thể tái tạo các kết quả mà họ nhận được (và dĩ nhiên, không thể tìm thấy câu trả lời ngay bây giờ). Bất kỳ cái nhìn sâu sắc vào những gì tôi đang làm sai ở đây?

Answer 1

CẬP NHẬT ĐÁP

Bạn phải gọi .draggable() cho mỗi yếu tố đó được thêm vào. Bộ chọn jQuery mà bạn sử dụng lúc khởi tạo chỉ áp dụng cho các phần tử tồn tại vào lúc này, không áp dụng cho những phần tử bạn sẽ tạo ra.

Dưới đây là một số JS nên hoạt động:

var draggable_opts = { 
      connectToSortable: ".sph-callout-portlet", 
      helper: "clone", 
      opacity: 0.75, 
      revert: 'invalid', 
      stop: function(event, ui) { 
       //alert(ui) 
      } 
     }; 

$(function() { 
    $(".sph-callout-portlet").sortable({ 
     opacity: 0.75, 
     placeholder: "ui-state-highlight", 
    }).disableSelection(); 

    $("#sph-callout-portlet-avail li").draggable(draggable_opts); 

    $(document).on("click",'#addNewCo',function(e){ 
     e.preventDefault(); 
     var newCo = $('<li>New Callout</li>').draggable(draggable_opts); 
     $('#sph-callout-portlet-avail').append(newCo); 
    }); 
});​ 

http://jsfiddle.net/SGevw/