Jquery 使克隆图像可拖动且可调整大小

Question

我一直在尝试使克隆图像可调整大小和拖动。

在下面的示例中，我只能设法在克隆图像上实现可调整大小或可拖动，但不能同时实现两者。有什么想法吗？

$('#canvas').droppable({
    drop: function(event, ui) {
      if (ui.draggable[0].id) {
        var elem = $(ui.helper).clone();
        ui.helper.remove();
        elem.draggable({
          cursor: 'move',
          containment: '#canvas'
        });
        //elem.resizable();  // draggable works but not resizable
        $(this).append(elem);
        elem.resizable();    // resizable works but not draggable
      }
    }
  });

我的example.

Answer 1

我找到了一种方法。

基本上不是克隆我需要创建一个新元素的元素。

var $image = $('<div class="container"><img src="http://lasolanadigital.com/wp-content/uploads/2014/12/monigote.jpg" class="dude_new" height="200px" width="150px" /></div>');
$('#canvas').append($image);
$image.draggable();
$image.find('.dude_new:first').resizable();

我更新了我的jsfiddle。

干杯。

Jquery 使克隆图像可拖动且可调整大小

Jquery make a clone image draggable and resizable

jquery

draggable

droppable

resizable