Jquery 拖放、克隆和拖放后调整大小

对不起，因为我是新来的，但是每一个参与实现图像删除克隆的可调整大小功能的人都失败了。 那我想做什么呢？我想从另一个拖放字段的div中的列表中拖放一些图像，在它们被拖放后，我希望它们能够调整大小。 我克隆了我的图像，只能调整/更改原始图像的大小

这是我的代码：

$(".draggable").draggable({
helper: 'clone',
cursor: 'move',
snap: '#droppable',
revert:"invalid"
});
$(".draggable").resizable({
});

$("#droppable").droppable({

drop: function (e, ui) {
if ($(ui.draggable)[0].id != "") {
x = ui.helper.clone();
ui.helper.remove();
x.draggable({
helper: 'ui-resizable-helper',
containment: '#droppable',
tolerance: 'fit'
});

x.appendTo('#droppable');
}

}
});

这是JFIDLE：

我还做了另一个代码。我太糟糕了，无法在删除和克隆的对象上添加可调整大小和淡出选项。当我每次点击克隆并再次拖动它时，我都在用克隆做实验，一个克隆正在制作中

我的备选代码是：

$(document).ready(function () {


   //Make element draggable
$(".draggable").draggable({
    helper: 'clone',
    cursor: 'move',
    revert:'invalid'
    }).on('dragstart', function (e, ui) {
$(ui.helper).css('z-index','999999');
}).on('dragstop', function (e, ui) {
$(this).after($(ui.helper).clone().draggable());
}); 


  $("#droppable").resizable({
         grid: [10000, 1]
     });

var x = null;
$("#droppable").droppable({
accept: '.draggable',
drop: function(e, ui) {
      $(this).append($(ui.helper).clone().attr("id", "id1").draggable({
      containment: '#droppable',
        cursor: 'move',
        snap: '#droppable'}));
      $(this).addClass("item");
      $(this).removeClass("ui-helper item");
      $(this).resizable();
      $(".item").dblclick(function() {
   $(this).fadeOut('slow');
 });
       }

});
});

在这个JSMiddle中，一切都很好

更新：

我试图做一个替代的代码，我得到了同样的错误。一旦我添加$clone.resizable，在放置失败后，即可调整可拖动功能的大小

但是在这个JSMiddle中，一切又重新开始了。。。

$(document).ready(function($) {

$(".droppable").droppable({
    accept: '.draggable',
    drop: function(event, ui) {
        var $clone = ui.helper.clone();
        if (!$clone.is('.inside-droppable')) {
            $(this).append($clone.addClass('inside-droppable').draggable({
                containment: '.droppable',
                tolerance: 'fit',
                position: 'relaitve'
            }));

            $clone.resizable({ //this works but I dont want it to on outside elements
                animate: 'true',
                ghost: 'true',
                handles:     'ne, nw, se, sw',
            });



        }
    }
});
$(".draggable").draggable({
    helper: 'clone',
    revert:"invalid"
});


});