Image draggable option not working after cropping removed

Question

Following is my PLNKR CODE.

Flow -

1) Click on any of the four images(pink, green, yellow, blue) they get loaded into the red div.

2) Drag the image and click on "Apply Crop" button.

But now I want to remove the cropping option so I clicked on "Remove Crop" button.

Code on Remove Crop button click -

$("#removeCrop").on("click", function(){
    jcrop_api.release();
});

Now the problem is though the cropping release from the div but now the image is no more draggable even though if I clicked on lower images from the tray and also the mouse pointer gets changed.

Let me know what I am doing wrong with the code. I tried to re instantiate the code "draggable" code in $("#removeCrop").on("click" but no luck. I created the whole on my own but from here I am unable to guess what I am doing wrong.

NOTE- Images are little heavy so it would be better to download the plnkr and replace images with some static images to have a better idea.

EDIT- I taken out some jQuery events from selImg event but no luck. Recent script - Changed Script

Answer 1

After doing the crop, your

<img id="inner" class="ui-draggable ui-draggable-handle" ...>

will change to

<img id="inner" ...>

and the classes ui-draggable ui-draggable-handle are removed. So the draggable will not work.

Also after adding the classes to your inner again, the jcrop-tracker is in front of your inner. So actually you can't click your inner component.

EDIT:

One dirty solution could be to hide the jcrop-tracker after your release:

$( ".jcrop-tracker" ).hide();

And then showing it in the Apply crop click event:

$( ".jcrop-holder div" ).show();
$( ".jcrop-holder div" ).css('opacity', 0.6);
$( "#wrapper" ).css('opacity', 1);
$( "#content" ).css('opacity', 1);

Here is the edited code: Edited Code