Drag & Drop sample

by Karl Gjertsen

HTML

<link rel="stylesheet" href="https://cdn.kendostatic.com/2014.2.716/styles/kendo.mobile.all.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.default.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2014.2.716/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2014.2.716/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2014.2.716/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://cdn.kendostatic.com/2014.2.716/styles/kendo.common.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.716/js/kendo.all.min.js"></script>
<body>
    <p>Draggable item disapears when it moves from the draggable list.</p>
    <p>Draggable item also jumps to the bottom of the list when you leave the box.</p>
     <h1>Draggable</h1>

    <div id="draggable">
        <div class="list-item sortable">D1</div>
        <div class="list-item sortable">D2</div>
        <div class="list-item sortable">D3</div>
    </div>
     <h1>Sortable</h1>

    <div id="sortable">
        <div class="list-item">Apples</div>
        <div class="list-item">Grapefruits</div>
        <div class="list-item">Bananas</div>
    </div>
</body>

CSS

.ob-hint {
        background: blue !important;
        display: block;
        width: 200px;
        background-color: blue;
        color: white;
    }
    #sortable, #draggable {
        border: 1px solid black;
        padding: 5px;
        width: 225px;
    }

JavaScript

$("#sortable").kendoSortable({
    placeholder: function placeholder(e) {
        return e.clone().addClass("ob-hint");
    },
    end: function (e) {
        console.log("dropped 1");
        if (e.action === "receive") {
            var item = $("<div>" + e.item.text() + "</div>");
            if (e.newindex === 0) item.insertBefore("#sortable.items[0]", this.element);
            else item.insertAfter("#sortable div:nth(" + e.newIndex + ")", this.element);
            e.preventDefault();
        }
    }
});

$("#draggable").kendoSortable({
    connectWith: "#sortable",
    placeholder: function placeholder(e) {
        return e.clone().addClass("ob-hint");
    },
    hint: function (e) {
        return e.clone().addClass("ob-hint");
    },
    filter: ".sortable",
    start: function () {
        $("#draggable div").each(function () {
            $(this).removeClass("sortable");
        });
    },
    end: function () {
        $("#draggable div").each(function () {
            $(this).addClass("sortable");
        });
    },
    change: function () {},
    move: function () {}
});