connectWith String(default: null)

Selector which determines if items from the current Sortable widget can be accepted from another Sortable container(s). The connectWith option describes one way relationship, if the developer wants a two way connection then the connectWith option should be set on both widgets.

By default when the Sortable widget is left with no items its height will become zero. This will prevent the user from being able to drop items back into it. To avoid this behaviour the developer should set the min-height CSS property of the sortable container.

Example - set up a one way connection from ListA to ListB

<ul id="listA">
    <li>ItemA1</li>
    <li>ItemA2</li>
    <li>ItemA3</li>
</ul>

<ul id="listB">
    <li>ItemB1</li>
    <li>ItemB2</li>
    <li>ItemB3</li>
</ul>

<script>
    $("#listA").kendoSortable({
        connectWith: "#listB"
    });

    $("#listB").kendoSortable();
</script>

<style>
    #listA li { background-color: #FF0000; }
    #listB li { background-color: #0000FF; }
</style>

Example - set up a bidirectional connection between Sortable widgets

<ul id="listA">
    <li>ItemA1</li>
    <li>ItemA2</li>
    <li>ItemA3</li>
</ul>

<ul id="listB">
    <li>ItemB1</li>
    <li>ItemB2</li>
    <li>ItemB3</li>
</ul>

<script>
    $("#listA").kendoSortable({
        connectWith: "#listB"
    });

    $("#listB").kendoSortable({
        connectWith: "#listA"
    });
</script>

<style>
    #listA, #listB {
        border: 1px solid #000000;
        min-height: 20px;
    }

    #listA li { background-color: #FF0000; }
    #listB li { background-color: #0000FF; }
</style>