Droppable объект не изменяемый

Question

Я пытаюсь перетащить изображение и сделать клонировали Droppable изображения изменяемого после падения без какой-либо удачи ...

Моего кода:

<img class="dragger" id="obj1" style="cursor: -webkit-grab;float:left; margin-left:5px; margin-top:5px;" src="objects/bike.png" width="80" height="80"> 


<img class="dragger" id="obj2" style="cursor: -webkit-grab;float:left; margin-left:5px; margin-top:5px;" src="objects/car.png" width="80" height="80"> 


//The dropable div 
<div id="contentHolder"></div> 

Jquery код:

<script> 
$(document).ready(function() { 

window.zindex = 999; 

    //$(".dragger").resizable({handles: 'ne, se, sw, nw'}); 

    $(".dragger").draggable({  
    helper: "clone" 
    }).on('dragstop', function (event, ui) { 
    $(this).after($(ui.helper).clone().draggable());   
    }); 



$("#contentHolder").droppable({ 
    drop: function(event, ui) { 


var id = ui.draggable; 

if(ui.draggable.hasClass("dragger")) { 

    $(".dragger").each(function(i) { 
    $(this).attr('id', "dragger" + (i + 1)); 
    $(this).removeClass("dragger").addClass("dragger" + (i + 1)); 
    $("dragger" + (i + 1)).resizable({handles: 'ne, se, sw, nw'}); 
    }); 


} 


     }  

}); 

});

Любые предложения, почему мои клонированные изображения с возможностью изменения размера не изменяются?

Answer 1

Ну, у вас есть много дополнительного кода, но корень вашей проблемы заключается в том, что jQuery обертывает ваше изображение в div, когда он заставляет ваш клон перетаскивать, а изменчивая часть изображения на самом деле в пределах этого div элемент.

Решение состоит в том, чтобы добавить элемент обертки вокруг ваших изображений, а затем сделать клонированный элемент перетаскиваемым, а изображение внутри него изменяться. Вам также нужно добавить display: inline-block; в CSS перетаскиваемого клона, чтобы внешний div сформировался естественным образом вокруг элемента img, поскольку он изменяется.

Кроме того, чтобы все это было правильно сработано, вы хотите связать все это с событием перетаскиваемого элемента stop, а не с событием drop сбрасываемым.

HTML:

<div class="dragger"> 
    <img id="obj1" src="http://placehold.it/80x80" /> 
</div> 
<div class="dragger"> 
    <img id="obj2" src="http://placehold.it/80x80" /> 
</div> 
<div id="contentHolder"></div> 

CSS:

#contentHolder { 
    display: block; 
    width: 100%; 
    min-height: 500px; 
    border: 2px dashed #999; 
} 
.dragger, .dragger-clone { 
    cursor: -webkit-grab; 
    display: inline-block; 
} 

JQuery:

$(document).ready(function() { 
    $(".dragger").draggable({ 
     containment: 'html', 
     helper: 'clone', 
     stop: function (event, ui) { 

      /* First, make the clone and append it 
      * to the droppable container 
      */ 
      $(ui.helper) 
       .clone(true) 
       .removeClass('ui-draggable-dragging') 
       .addClass('dragger-clone') 
       .appendTo('#contentHolder'); 

      /* Next, make the clone draggable and 
      * contained by the droppable container 
      */ 
      $(".dragger-clone") 
       .draggable({ containment: '#contentHolder' }); 

      /* Now, make the image within the clone resizable 
      */ 
      $(".dragger-clone img") 
       .resizable({handles: 'ne, se, sw, nw'}); 
     } 
    }); 
    $("#contentHolder").droppable(); 
}); 

JSFiddle here...