CODEWITHSUNDEEP
jquerypositioningdraggabledroppable
int
int

Reputation: 13

Draggable and droppable position

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],
});

Upvotes: 1

Views: 92

Answers (3)

Anubhav
Anubhav

Reputation: 7208

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

FIDDLE

Upvotes: 1

gmaniac
gmaniac

Reputation: 959

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.

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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

Upvotes: 1

Related Questions