New to Kendo UI for jQuery? Start a free 30-day trial

ConnectWith

configuration

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.

connectWith

String

Default: null

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

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