Jquery 使克隆图像可拖动和调整大小答案

【问题标题】：Jquery make a clone image draggable and resizableJquery 使克隆图像可拖动和调整大小
【发布时间】：2018-01-10 04:56:34
【问题描述】：

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

在以下示例中，我只能设法在克隆图像上调整大小或可拖动，但不能两者兼而有之。有什么想法吗？

$('#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。

【问题讨论】：

IIRC，曾经有一个问题，使相同的元素可拖动和调整大小。我认为 draggable 出于某种原因设置了内联宽度和高度，这 fubar 可以调整大小。类似的东西，据我所知。

标签： jquery draggable droppable resizable

【解决方案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。

干杯。

【讨论】：