2

对不起，因为我是新手，但每次尝试实现删除图像克隆的可调整大小功能都失败了。那我想做什么？我想从另一个下拉字段中的 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');
}

}
});

这是Jfiddle：

http://jsfiddle.net/UkvVy/11/

我还做了一个替代代码。我太糟糕了，无法在删除和克隆的对象上添加可调整大小和淡出选项。当我每次单击克隆以再次拖动它时，我都会尝试克隆，因此正在制作克隆。

我的替代代码是：

$(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');
 });
       }

});
});

在这个 Jsfiddle 中，一切正常......

http://jsfiddle.net/UkvVy/18/

更新：

我试图制作一个替代代码，但我得到了同样的错误。一旦我添加 $clone.resizable 拖放失败后的可拖动能力。

但是在这个 JSfiddle 中，一切都恢复正常了...... http://jsfiddle.net/UkvVy/45/

$(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"
});


});
4

0 回答 0