Update: I simplified your code a little bit. Here is the link: http://jsfiddle.net/lotusgodkk/8VY52/250/
I hope this is what you are looking for.
Javascript:
$(document).ready(function () {
$(document).on('click', '.block-add', function () {
var a = $(this);
var src = a.find('img:first').attr('src');
var elem = $('<div class="container"><img src="' + src + '" class="blocks" /></div>');
$('.block').append(elem);
elem.draggable();
elem.find('.blocks:first').resizable();
return false;
});
});
HTML:
<br/>
<div class="block"></div>
<center>
<br/>
<div id="existingImges">
<br/><a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="http://www.a1smallbusinessmarketing.com/images/prosbo_hires.jpg" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" /></a>
<a class="block-add" href="javascript:void(0)"><img class="uploadImage" src="https://g.twimg.com/business/page/image/11TwitterForSmallBusiness-300_1.png" /></a>
</div>
</center>
You should wrap image into a div and then bind draggable on the container and resizable on the image. It has something to do with how jQuery draggable and resizable works.
jQuery Ticket for resizable and draggable on image
Example code: http://jsfiddle.net/lotusgodkk/8VY52/247/
$('#draggableHelper').draggable();
$('#image').resizable();
HTML:
<div id="draggableHelper">
<img id="image" src="image-src" />
</div>