jQuery Draggable ögelerin üst üste eklenmesini engellemek

Merhabalar,

üniversitedeki projemiz icin yerini degisdirebilecegimiz "widget" özelligi hazirlamam gerekiyor.

Hazirladigim Widgetleri (ögeleri) istedigim sekilde yerini degisdirebiliyorum fakat herhangi bir ögeyi baska bir ögenin üstüne koyabiliyorum.

Bunu nasil engelleyebilirim?
Ögemi koymak istedigim yerde baska bir öge bulunuyorsa bunu üstüne degil yanina eklemesini nasil saglayabilirim?

Suanki durumum:

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style>
    .grid {
        background: grey;
        height: 500px;
        padding: 10px;
    }

    .row {
        margin: 0;
        padding: 0;
    }

    .grid-item {
        /*
        background: cornflowerblue;
        border: 1px solid black;
        border-radius: 4px;
        width: 100px;
        height: 40px;
        float: left;
        margin: 5px;
        */
    }

    #resizable {
        width: 150px;
        height: 150px;
        padding: 0.5em;
    }

    #resizable h3 {
        text-align: center;
        margin: 0;
    }

    .ui-resizable-helper {
        border: 1px dotted black;
        border-radius: 4px;
    }
</style>

<script>
    $(function () {
        $(".grid-item").draggable({
            stack: ".grid",
            grid: [1, 1],
            containment: ".grid",
            opacity: 0.35
        });

        $(".grid-item").resizable({
            grid: 15,
            helper: "ui-resizable-helper"
        });

        $('.grid').droppable({
            accept: '.grid-item'
        });

        $(".grid-item").sortable({

            axis: "x",
            revert: true,
            scroll: false,
            placeholder: "sortable-placeholder",
            cursor: "move"

        });
    });
</script>

<div class="row">
    <div class="col-md-10 grid">
                <div class="grid-item panel panel-default">
            <div class="panel-heading">Baslik</div>
            <div class="panel-body">Icerik</div>
        </div>
                <div class="grid-item panel panel-default">
            <div class="panel-heading">Baslik</div>
            <div class="panel-body">Icerik</div>
        </div>
                <div class="grid-item panel panel-default">
            <div class="panel-heading">Baslik</div>
            <div class="panel-body">Icerik</div>
        </div>
    </div>
    <div class='cloned-slides' id='cloned-slides'></div>

    <div class="col-md-2 grid" style="background: red">
        <div class="grid-item panel panel-default">Item #2</div>
        <div class="grid-item panel panel-default">Item #2</div>
        <div class="grid-item panel panel-default">Item #2</div>
    </div>

</div>

https://jsfiddle.net/u1pjaww5/

Yokmu yardimci olabilecek biri