추가 요소를 드래그 가능하게 만들기

Question

클릭 할 수있는 아이콘으로 작업하고 있습니다. div에 다른 아이콘을 추가 할 것입니다. 만든 아이콘을 드래그 할 수 있도록 설정하고 inspect 요소에서 드래그 가능하지만 화면에서 드래그 할 수 없습니다. 누군가가 문제가되는 것을 확인할 수 있습니까? HTML

:

<div id = icon> 
<img class="icon" src="../../Pictures/bulb.png" width="50" height="50"/> 
<img class="icon" src="../../Pictures/snow.png" width="50" height="50"/> 
</div> 

의 JScript

$(function() { 
$('.icon').click(function() { DrawImage($(this).attr('src')); }); 
}); 
function DrawImage(a) { 
    image = document.createElement('img'); 
    image.setAttribute('class', 'drag'); 
    image.setAttribute('src', a); 
    image.setAttribute('draggable', 'true'); 
    image.setAttribute('style', 'position:relative; top:0px; left:0px;'); 
    image.height = 50; 
    image.width = 50; 
    $('#icon').append(image); 
} 

내 HTML 헤드에 추가

<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.min.js")"></script> 
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")"></script> 

갱신 :

이미지 요소를 복제하고 일부를 할당하여 고정 att 여기에 ribute 것은

var iconnew = $(iconimg).clone(); 
iconnew.attr({ "id": "clone"}); 
iconnew.css({'top':mouseY, 'left':mouseX}) 
iconnew.appendTo('#drag').draggable({ containment: '#bg' }); 

Answer 1

난 당신이 DOM에 추가 할 때 실제로 이미지 요소의 드래그 기능을 사용 가능하게 생각하지 않습니다. 이 귀하의 drawImage 기능을 변경 시도 할 수 :

http://jsfiddle.net/qDZsb/