1

I need to be able to combine two drag/droppable items when the user drops them on each other. Simply the user needs to drag the items over each other and have them merge together. They need to be able to drag them apart again afterwards. It's a bit like on the Android home screen icons can be dropped onto each other and make a 'folder'. Currently the icons to be dragged are stored within div tags, these need wrapping with another similar div inside a div.

Thanks

StorySystems
  • 167
  • 9

1 Answers1

1

Something like this?
Using jquery 1.9.1 jquery ui 1.9.2
http://jsfiddle.net/dm6vG/1/

JS:

$(function(){
    $(".drag-me").draggable({
        stop:function(e){
            $(".drop-here").css('background','#FF0000');
            $(".drop-here").css('border-radius','100px');
            $(this).remove()
        }
    });
})

HTML:

<div class="drop-here">
</div>
<div class="drag-me">
    <a href="#" >Drag me</a>
</div>

CSS:

.drop-here{
    width: 200px;
    height: 200px;
    background:#00FF00;
    margin:20px;
}

If they are merged together how would they drag apart?

Johnston
  • 20,196
  • 18
  • 72
  • 121
  • I have removed the $(this).remove(), which allows the text to still be seen (sorry I forgot to mention that in the Question). The problem is that any drag gives the red circle, I need only when the draggable is dropped into the green square, I guess I need to check the class of where the draggable is dropped to check that the draggable is dropped onto another item. – StorySystems Dec 16 '13 at 12:36
  • @StorySystems In that case use `droppable` too. See this for rejecting: http://stackoverflow.com/questions/5581288/how-to-decide-whether-to-accept-or-reject-a-jquery-draggable-into-a-droppable. Also you can add a data attribute to each item to decide whether or not to reject the item. – Johnston Dec 16 '13 at 13:25