dragged image if not re-sizing and dragging with in the droppable area after dropping ?

Question

i'm just trying to drag a clone of a image to div once its dropped then i want that clone to be draggable and resizable but with containment in that div only. When i make cloned image its working fine se here Jfiddle!!.

HTML

    <div class="option" id="f">
    <img class="options" src="http://lorempixel.com/90/90/" alt=""/>
</div>
<div class="lame">
    <img src="http://placehold.it/350x150" alt=""/>
</div>

Jquery

    $(function() {
    $( ".options" ).draggable({ cursor: "pointer",opacity: 0.6,helper: "clone"
        });
   $(".lame").droppable({ accept:".options",drop: function(event, ui) {
    $.ui.ddmanager.current.cancelHelperRemoval = true;
    $(".ui-draggable").hover(function() {
        $(this).addClass('fix');
        $(this).draggable({containment: ".lame"});
    }, function() {
        $(this).removeClass('fix');
    });
    }
    });
});

but when add resizable to it the draggable stops working and image moves down. you can see it here Link . Also on fiddle image didn't move down see !! but draggable is also not working here also. please tell me how to fix this or either do this in correct way using latest Jquery-ui Version.

Answer 1

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.

http://jsfiddle.net/7kkW3/2/

Answer 2

In your hover event, try making the parent draggable instead of the img itself. When the jquery ui makes an img tag resizable it wraps it inside another div causing some problems.

$(".ui-draggable").hover(function() 
{
  $(this).addClass('fix');
  $(this).parent().draggable({containment: ".lame"});
  $(this).resizable({containment: ".lame"});
}