problem jquery DRaggable and resizable images

[vijayram]

Hi everybody,

i have problem in image resizable and draging.

what is the problem in my code.

plz help me.

var c;
var crop_api;
$(document).ready(function(){
var uploader = new qq.FileUploader({
//var list=document.getElementById('fileList');

element: document.getElementById('upload_button'),
           // element: $('#upload_button'),
            action: upload_url,
             // action: "http://localhost/public_html/web/meetnewpeople/upload" ,
            params: {
                            meetnewpeopleid: 1


            },
            allowedExtensions: ['jpg','webm','png','gif'],
                        onComplete: function(id, fileName,responseJSON){
                                //alert(responseJSON);
                                var uploadFilePath = responseJSON.fileName;
                                var rotateArray=[90,65,45];
                var arrsize = new Array(3);
                arrsize[0]=120;
                arrsize[1]=194;
                arrsize[2]=240;
                var arrheight= new Array(3);
                 arrheight[1]=90;
                 arrheight[2]=180;
                 arrheight[3]=220;

                var arrposition = new Array(3);
                arrposition[0]=(45,45);
                arrposition[1]=(65,65);
                arrposition[2]=(40,40);

                varfrnasize=(Math.round((Math.random()*3)));
                alert(arrsize[varfrnasize]);
                varfrnaheight=(Math.round((Math.random()*3)));
                varfrnaposition=(Math.round((Math.random()*3)));

                                imgTagStr = "";
                                imgTagStr +="<div id='image_container' class='planspace-image' >";
                                imgTagStr += "<img class='upload_pic' src='"+uploadFilePath+"' width='"+arrsize[varfrnasize]+"' height='"+arrheight[varfrnaheight]+"' position='"+arrposition[varfrnaposition]+"'  border='0' />" ;
                                imgTagStr += "<div class='c_crop' >"
                                imgTagStr += "<img src='"+too_path+"/images/btn_crop.png' border='0' class='tcrop' />";
                                imgTagStr += "</div>";
                                imgTagStr +="</div>";
                                //alert(responseJSON.mime);
                                window.zindex = 30;

                $('#container_upload').append(imgTagStr);

            $("#image_container").resizeable();
            $('.upload_pic').draggable({});




                                $('#container_upload').append(imgTagStr);
                                $('.tcrop').click(function(){
                                        $(this).parent().parent().find('.upload_pic').Jcrop({onChange: updatecoordinate, onSelect: updatecoordinate},function(){crop_api = this});
                                });
                                /*$('#upload_image').attr('src',"http://localhost/public_html/web/"+responseJSON.fileName);
                                //$('#upload_cropimage').attr('src',"http://localhost/public_html/web/"+responseJSON.fileName);  // suriya
                                $('#upload_cropimage').attr('src',"http://localhost:81/working_symfony/public_html/web/"+responseJSON.fileName);
                                $('#upload_cropimage').Jcrop({onChange: updatecoordinate, onSelect: updatecoordinate},function(){crop_api = this});
                                $('#crop').click(updatecrop);*/
                                return true;

                        }
});

});
function updatecoordinate(co)
{
        c = co;
}
function updatecrop()
{
        $.ajax({url: crop_url,
                        data: { cord : c, fileName: $('#upload_cropimage').attr('src') },
                        cache: false,
                        success: function(data, textStatus, jqXHR){
                                crop_api.destroy();
                                //$('#upload_cropimage').parent().html('<img src="http://localhost:81/working_symfony/public_html/web/crop.jpg" />');
                                $('#upload_cropimage').parent().html('<img src="http://localhost/public_html/web/crop.jpg" />');
                        }
                });
}