删除裁剪后图像可拖动选项无法正常工作

Question

以下是我的PLNKR CODE。

流程 -

1）点击加载到红色div中的四个图像（粉色，绿色，黄色，蓝色）中的任何一个。

2）拖动图像并单击＆＃34; Apply Crop＆＃34;按钮。

但是现在我想删除裁剪选项，所以我点击＆＃34;删除裁剪＆＃34;按钮。

删除裁剪按钮上的代码 -

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

现在的问题是虽然来自div的裁剪释放但现在图像不再可拖动，即使我点击了托盘中的较低图像并且鼠标指针也发生了变化。

让我知道我在使用代码时遇到了什么问题。我试图重新实例化代码＆＃34; draggable＆＃34; $("#removeCrop").on("click"中的代码，但没有运气。我自己创造了整体但是从这里我无法猜出我做错了什么。

注意 - 图像有点重，所以最好下载plnkr并用一些静态图像替换图像以获得更好的想法。

编辑 - 我从selImg事件中取出了一些jQuery事件，但没有运气。最近的脚本 - 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组件。

编辑：

一个肮脏的解决方案可能是隐藏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