Question

对不起，因为我是新手但是每个人都参与实现图像丢失克隆的可调整大小的功能失败。那我该怎么办？我想从另一个drop-field中的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，就会在drop掉线后失去可拖动的能力。

但是在这个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"
});


});

拖放，克隆掉落并在放下后调整大小

0 个答案: