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

时间:2017-08-02 19:49:15

标签: jquery draggable droppable resizable

我一直试图让克隆的图像可以调整大小并且可以拖动。

在下面的示例中,我只能设法在克隆映像上获得可调整大小或可拖动,但不能同时在两者上。有什么想法吗?

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

1 个答案:

答案 0 :(得分:0)

我找到了办法。

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

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

干杯。