Back to all examples

Disable

Disabled items cannot be dragged but are valid drop targets.

Disabled item 1
Disabled item 2
Item 3
Item 4
Item 5
Item 6

Filter

Filtered items cannot be dragged and are not valid drop targets.

Not sortable item 1
Not sortable item 2
Item 3
Item 4
Item 5
Item 6
PHP 
<?php
require_once '../lib/Kendo/Autoload.php';

$sortableDisable = new \Kendo\UI\Sortable('#sortable-disable'); // select the container for the Sortable
$sortableDisable->disabled('.disabled');

echo $sortableDisable->render();

$sortableFilter = new \Kendo\UI\Sortable('#sortable-filter'); // select the container for the Sortable
$sortableFilter->filter('.sortable');

echo $sortableFilter->render();
?>

    <div class="demo-section sortable-wrapper">
        <h4>Disable</h4>
        <p>Disabled items cannot be dragged but are valid drop targets.</p>
        <div id="sortable-disable">
            <div class="sortable disabled">Disabled item 1</div>
            <div class="sortable disabled">Disabled item 2</div>
            <div class="sortable">Item 3</div>
            <div class="sortable">Item 4</div>
            <div class="sortable">Item 5</div>
            <div class="sortable">Item 6</div>
        </div>
    </div>

    <div class="demo-section sortable-wrapper">
        <h4>Filter</h4>
        <p>Filtered items cannot be dragged and are not valid drop targets.</p>
        <div id="sortable-filter">
            <div class="not-sortable">Not sortable item 1</div>
            <div class="not-sortable">Not sortable item 2</div>
            <div class="sortable">Item 3</div>
            <div class="sortable">Item 4</div>
            <div class="sortable">Item 5</div>
            <div class="sortable">Item 6</div>
        </div>
    </div>

    <style>
        #example {
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

        .sortable-wrapper {
            width: 37%;
            margin: 20px 40px;
            padding: 20px;
            float: left;
        }

        .sortable-wrapper p {
            margin: 5px auto 20px;
        }

        .sortable, .not-sortable {
            padding: 10px 0;
            margin: 1px 0;
            width: 358px;
            text-align: center;
            color: #ffffff;
        }

        .sortable {
            background-color: #51A0ED;
            cursor: move;
        }

        .not-sortable {
            background-color: #8E8E8E;
            opacity: 0.5;
        }

        .disabled {
            background-color: #FF0000;
            opacity: 0.5;
            cursor: auto;
        }
    </style>