jQuery Draggable / Resizble with crop and overflow issue

Question

现在好了，我有两个令我讨厌的问题。先看小提琴，以便更好地理解。

https://jsfiddle.net/TheDeveloper/y6qgchzL/

首先：我的图像上有一个裁剪区域（叠加），允许用户选择他们想要裁剪的图像上的区域。现在我不想执行真正的裁剪，而是我想隐藏图像的其余部分，但是仍然需要工作。我不确定我的方法是否正确。

第二名：主绿色容器上面隐藏着溢出，很好。但是可以在上面显示可转换手柄但是隐藏图像吗？

到目前为止使用的

代码：

$('#theone').draggable({  containment: "parent"});
$("#theone").resizable({handles: "n, e, s, w"});

    $('#btntheone').click(function() {
        $('#theoneinner').remove();
        $('<div id="theoneinner"></div>').appendTo('#theone');
        $('#theoneinner').draggable({containment: "#theone", });
        $('#theoneinner').resizable({handles: "n, e, s, w"});
    })


    $('#btncrop').click(function() {
        if ($('#theoneinner').length > 0) {
            var $obj = $("#theoneinner");
            var height = $obj.height();
            var width = $obj.width();
            var top = $obj.position().top;
            var left = $obj.position().left;
            alert('Top:' + top + '\nLeft:' + left + '\nHeight:' + height + '\nWidth:' + width);
        } else {
            alert('add overlay');
        }
    });