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

Posted 2023-05-08

【中文标题】Jquery 使克隆图像可拖动和调整大小

【英文标题】：Jquery make a clone image draggable and resizable

【发布时间】：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 可以调整大小。类似的东西，据我所知。

【参考方案1】：

我找到了一种方法。

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

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

我更新了我的jsfiddle。

干杯。