[jQuery] Appended element is not draggable

Hi
I have a container div with some spans. I had set the spans to be
dragable and I want to do a function that on click will append a new
span to my container and make it also draggable.

I manage to append the new span in #selectable container but it is not
draggable.

My code is:

<script type="text/javascript">
$(function() {
$("span").draggable();
});
</script>

<script type="text/javascript">
$(document).ready(function(){
$("#selectable").click(function(){
$("#selectable").append("<span>The new span</span>");
});

});
</script>

and the markup is:
<div id="selectable">
<div class="ui-widget-content" style="width: 800px; height: 500px;
background:#ccc;">
<span class="text draggable">Item 1</span>
<span class="text draggable">Item 2</span>
<span class="text draggable">Item 3</span>
<span class="text draggable">Item 4</span>
<span class="text draggable">Item 5</span>
<span class="text draggable">Item 6</span>
<span class="clone">Clone</span>
<p class="clone">a p replaced</p>
</div>
</div>

Thank you.