Jquery drag and drop

Question

Hi I am new to jQuery and trying work on a proof of concept. I have posted the example code here and my requirement is as follows.

I have 2 droppables dog/sheep and I want to drop them on the shirt.

I drop the sheep/dog on the shirt but as soon as drop it goes to the down-left position of the div.

I tried doing $('[id$="apparel"]').append(dropElem); instead of $(this).append(dropElem);

Can some one please help me in this?

Appreciate your time.

thanks John

this is my javascript

$(".items").draggable({helper: 'clone'});
$(".droparea").droppable({
    accept: ".items",
    hoverClass: 'dropareahover',
    tolerance: 'touch',
    drop: function(ev, ui) {
        var dropElemId = ui.draggable.attr("id");
        var dropElem = ui.draggable.html();
        $(this).append(dropElem);
        alert("drop done");
    }
});

And the HTML

<div class="wrap">
    <div class="sourcearea">
        <span class="items" id="itemsheep">
            <img src="sheep.jpg" width="100">
        </span>
        <span class="items" id="itemdog">
            <img src="dog.jpg" width="100">
        </span>
    </div>
    <div class ="droparea">
        <img src="RedShirt.jpg" width="300" height="300" id="apparel">
    </div>
</div>

Answer 1

Check out the style on the DIV after dropping. It it positioned absolute, does it float, etc?

Also, check out a similar problem (plus solution) I had a few months ago here on Stack Overflow. It talks about a different solution to "snapping" the dropped element to a container.

Answer 2

I'm not sure what you're really planning to do here but it seems you are trying to append the content of the "ITEM" classes inside your droppable class. I said that because that is what your code is actually doing right now.

1. If that is that case, you should put a "float:left" property on your "item" class. This will neatly stack them horizontally side by side starting on the left (You may also want to put a little right margin with each item to prevent their edges from touching each other). If the size for new item is less than the available horizontal space it will wrap down to the left edge of your droppable.

2. If you want the "clone" of your items to "stay in place" where you dropped them, you can use the "ui.position" property to save their position relative to the droppable.

3. If you want the actual draggables to "stick" to your droppable, remove these lines:

                       var dropElemId = ui.draggable.attr("id");
                       var dropElem = ui.draggable.html();
   
   
                   $(this).append(dropElem);
   
   
   

   And it's done! You may also want to remove the draggable property of the item to "fix" the item inside your shirt.

Hope that helps! ;-)

Answer 3

$(".items").draggable({helper:'clone'});

$(".droparea").droppable({
    accept: ".items",
    hoverClass: 'dropareahover',
    tolerance: 'touch',
    drop: function(ev, ui) {
       var ele = ui.draggable.eq(0);
       //position element where helper was dropped
       ele.css("position", "absolute");
       ele.css("top", ui.absolutePosition.top);
       ele.css("left", ui.absolutePosition.left);
       //comment next line out if items shouldn't be restricted to redshirt
       ele.draggable('option', 'containment', this);
       //comment previous line out and next in if items shouldn't be draggable anymore
       //ele.draggable('destroy');
       $(this).append(ele);
    }
});