jQuery UI可在容器中水平对齐自动对齐

Question

我正在处理jQuery UI drag＆amp;下降，我的要求是当我在Drop Container Div上放下DIV时，它将自动与水平对齐。我尝试了一些R＆amp; d并获得了使其垂直对齐但无法将其更改为水平的代码。

脚本：

$(function(){
    $('#add').click(function(){
        $('#container').append('<div class="ui-widget-content draggable">Zone<i class="fa fa-pencil-square-o">&nbsp;&nbsp;&nbsp;</i><i class="fa fa-times"></i></div>');
        $(".draggable" ).draggable();
        $('.dropTarget').droppable({
            drop: function(ev, ui) {
                $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
            }
        });
    });
});

html：

<a href="javascript:void(0);" id="add">Add Zone</a>
<div id="container" style="height: 100px;"></div>
<div class="dropTarget" style="float: left; border:1px solid black; height: 200px; width: 200px;"></div>

工作小提琴

Answer 1

对我有帮助的是添加

.draggable {
    float: left;
    /* rest of the css */
}

希望这会有所帮助！