Draggable and droppable position

Question

Please for help on this jsfiddle

The problem is when you drop element it does not position well. I know the problem is because of left: 12px; in css but cant figure out how to solve.

$('.b').droppable({
        drop:function(event, ui) {
            ui.draggable.detach().appendTo($(this));
        }
});
$('.b').selectable();

$('.c').draggable({
    helper:"clone",
    revert: 'invalid',
    opacity: 0.5,
    grid: [30,36],
});

Answer 1

Just use ui.draggable.detach().appendTo($(this).prev()) instead

FIDDLE

Answer 2

in css

 .b { background: #BBFFBB;
    width: 24px;
    float: left;
    border-style: solid; 
    height:30px;
    line-height: 30px;
}
.c { background: #D00000 ;
    position: relative;
    height: 24px;
    text-align: center;
    line-height: 24px;
    padding: 3px 3px 3px 3px;
}
.a{
    width: 100%;
    float: left;
}

DEMO

Answer 3

I think this is what you are looking for jsfiddle

.b { background: #BBFFBB;
    width: 24px;
    float: left;
    border-style: solid; 
    height:30px;
    line-height: 30px;
}
.c { background: #D00000 ;
    position: relative;
    width:25px;
    height: 30px;
    text-align: center;
    line-height: 24px;
}
.a{
    width: 100%;
    float: left;
}

I removed the left and margins then changed some of the widths I think this is what you were looking for.