I was just looking into your request from the previous question and I saw that you had asked a new question.
Here is what I came up with.
HTML
<div class="option" id="f" style="display:inline-block;">
<img class="options" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTpqrkAF5pPbe8N9fko9gLyZalAyeSm4p-dyU72YD3FuvmDHCW4" alt=""/>
</div>
<br>
<div class="lame" style="display:inline-block;">
<img src="http://placehold.it/350x150" alt=""/>
</div>
Notice the style="display:inline-block;"
this is important so that your .option
and .lame
div's do not span accross the whole screen.
jQuery
$(function() {
$( ".option" ).draggable({ cursor: "pointer",opacity: 0.6,helper: "clone"});
$(".lame").droppable({
accept:".option",drop: function(event, ui) {
$.ui.ddmanager.current.cancelHelperRemoval = true;
$(ui.helper).draggable({cursor : "pointer",opacity: 0.6,containment :".lame"});
$(ui.helper).find('.options').resizable({containment : ".lame"});
}
});
});
Instead of calling .draggable
on .options
we are calling it on .option
the container div.
Once the image has been dropped in .lame
we need to make .option
(or div) draggable. And the .options
or image re sizable. Seems to work pretty good when we do it this way.
Take a look at the example.