jQuery-UI를 드래그 할 수없는 이유는 무엇입니까?

Question

다음 코드를 작성한 후 해당 포인트 (img 및 div 내의 텍스트)가 생성 된 후에 드래그 할 수있게하려고합니다.

<div id="container"> 
    <img src="images/aoi.png" alt="" /> 
    <div id="point_panel"> 
     <form> 
      <fieldset id="point_container"> 
       <img id="point" src="images/point.png" alt="" /><input id="point_name" type="text" /> 
      </fieldset> 
     </form> 
    </div> 
</div> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#point').click(function() { 
      var alt = $('#point_name').val(); 
      $('#container').append('<div class="points"><img src="images/point.png" alt=\"'+alt+'\" />'+alt+'</div>'); 
     }); 
     $('.points').draggable({ containment: '#container', stack: '.points', opacity: 0.5, zIndex: 100 }); 
    }); 
</script> 

양식에서 img를 클릭하면 동일한 img 및 텍스트를 가진 새 div가 만들어집니다. 그런 다음 div는 컨테이너의 ID를 사용하여 div 내에서 드래그 할 수 있어야합니다.

포인트를 만들면 드래그 할 수 없습니다. 내 암호가 없습니까?

Answer 1

이 시도

감사 :

$(document).ready(function() { 
    $('#point').click(function() { 
     var alt = $('#point_name').val(); 
     var el = $('<div class="points"><img src="images/point.png" alt=\"'+alt+'\" />'+alt+'</div>'); 
     $('#container').append(el); 
     $(el).draggable({ containment: '#container', stack: '.points', opacity: 0.5, zIndex: 100 }); 
    }); 
}); 

Answer 2

$(document).ready(function() { 
      $('#point').click(function() { 
       var alt = $('#point_name').val(); 
       $('#container').append('<div class="points"><img src="images/point.png" alt=\"'+alt+'\" />'+alt+'</div>'); 
       //bind draggable to last inserted div 
       $('#container').find('.points:last').draggable({ containment: '#container', stack: '.points', opacity: 0.5, zIndex: 100 });    
      }); 
      $('.points').draggable({ containment: '#container', stack: '.points', opacity: 0.5, zIndex: 100 }); 
     });