Question

的帮助

问题是当你丢弃元素时它不能很好地定位。我知道问题是因为左：12px;在CSS中，但无法弄清楚如何解决。

$('.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

在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 2

我认为这就是你要找的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;
}

我删除了left和margin，然后更改了一些width s我认为这就是您要找的内容。

Answer 3

只需使用ui.draggable.detach().appendTo($(this).prev())代替

FIDDLE

可拖动和可放置的位置

3 个答案: