Изображение перетаскиваемый вариант не работает после обрезки удален

Question

Ниже приведено мое PLNKR CODE.

Flow -

1) Нажмите на любом из четырех изображений (розовый, зеленый, желтый, синий), они загружаются в красные дела.

2) Перетащите изображение и нажмите кнопку «Применить обрезку».

Но теперь я хочу удалить параметр обрезки, поэтому я нажал кнопку «Удалить растение».

Код на Удалить Crop нажатия кнопки -

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

Теперь проблема, хотя выпуск кадрирования из DIV, но теперь изображение не более перетаскиваемое, хотя, если я нажал на нижние изображения из лотка а также изменяется указатель мыши.

Позвольте мне знать, что я делаю неправильно с кодом. Я попытался повторно создать код «draggable» в $("#removeCrop").on("click", но не повезло. Я создал все сам по себе, но отсюда я не могу догадаться, что я делаю неправильно.

ПРИМЕЧАНИЕ - Изображения немного тяжелые, поэтому лучше было бы скачать plnkr и заменить изображения на некоторые статические изображения, чтобы иметь лучшую идею.

EDIT - Я вынул некоторые события jQuery из selImg событий, но не повезло. Последние сценарий - Changed Script

Answer 1

После этого урожая, ваш

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

изменится

<img id="inner" ...> 

и классы ui-draggable ui-draggable-handle удаляются. Таким образом, draggable не будет работать.

Также после добавления классов в ваш inner, jcrop-tracker находится перед вашим inner. Поэтому на самом деле вы не можете нажать на свой компонент inner.

EDIT:

Один грязный раствор может быть, чтобы скрыть jcrop-tracker после вашего release:

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

А потом показывать его в случае Apply crop клик:

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

Вот Код редакции: Edited Code