Draggable Images After Button Is Clicked

Question

I am trying to make a draggable image that only appears once a button is clicked. I have searched the web and I don't see what the problem is. This is the code

<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

Be sure you are including the correct scripts.

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" />