Перетаскиваемые изображения после нажатия кнопки

Question

Я пытаюсь сделать перетаскиваемое изображение, которое появляется только после нажатия кнопки. Я искал в Интернете, и я не понимаю, в чем проблема. Это код

<script> 
$(document).ready(function(){ 
    $("#button1").click(function(){ 
     $("#a").prepend('<img src="img.png">'); 
    }); 
}); 
</script> 


<button id="button1">Image</button> 
<br> 
<p id="a"> 
</p> 

Answer 1

$(document).ready(function() { 
 
    $("#button1").click(function() { 
 
    var img = $('<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRakbzvOx0lTpQmgbeBF3oG9GHq9kInQ4b2tMdnTMiwjQQOhlznNb6NgkA">'); 
 
    $("#a").prepend(img); 
 
    img.draggable(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> 
 

 

 
<button id="button1">Image</button> 
 
<br> 
 
<p id="a"> 
 
</p>

Answer 2

Убедитесь, что вы в том числе правильные сценарии.

window.drag = function() { 
 
    var clone = $('img:first').clone(); 
 
    clone.insertAfter('img:last'); 
 
    $('img').not('img:first').fadeIn(800); 
 
    $('img').draggable(); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 
<button onclick="drag()">Drag Pics</button> 
 
<img height="50" width="50" style="display:none; position:absolute;" src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/600px-Smiley.svg.png" />