Kendo UI sortable within a sortable

Question

I'm trying to get the following to work:

    <div id="playlist">
        <div id="playlist-title"><span>My Playlist</span></div>
        <ul id="sortable-basic">
            <div class="sortable-div">
                <li>drag div</li>
                <li class="sortable">Papercut <span>3:04</span></li>
                <li class="sortable">One Step Closer <span>2:35</span></li>
            </div>
            <div class="sortable-div">
                <li>drag div</li>
                <li class="sortable">With You <span>3:23</span></li>
                <li class="sortable">Points of Authority <span>3:20</span></li>
            </div>
            <div class="sortable-div">
                <li>drag div</li>
                <li class="sortable">Crawling <span>3:29</span></li>
                <li class="sortable">Runaway <span>3:03</span></li>
            </div>
            <div class="sortable-div">
                <li>drag div</li>
                <li class="sortable">By Myself <span>3:09</span></li>
                <li class="sortable">In the End <span>3:36</span></li>
            </div>
            <div class="sortable-div">
                <li>drag div</li>
                <li class="sortable">A Place for My Head <span>3:04</span></li>
                <li class="sortable">Forgotten <span>3:14</span></li>
            </div>
            <div class="sortable-div">
                <li>drag div</li>
                <li class="sortable">Cure for the Itch <span>2:37</span></li>
                <li class="sortable">Pushing Me Away <span>3:11</span></li>
            </div>
        </ul>
    </div>
    <script>
            $(document).ready(function() {
                $("#sortable-basic").kendoSortable({
                    hint:function(element) {
                        return element.clone().addClass("hint");
                    },
                    placeholder:function(element) {
                        return element.clone().addClass("placeholder").text("drop here");
                    },
                    cursorOffset: {
                        top: -10,
                        left: -230
                    },
                    items: ".sortable, .sortable-div"
                });
            });
    </script>

So the plan is the following: You need to be able to drag the div's up and down other div's. This works fine. But you also need to be able to drag a single item around, in and out the div. This is the part I cannot figure out. When I click an item it selects the div anyways. For the life of me i cannot seem to figure this out.

Answer 1

please try below code.

For your more reference, I was modify given link code: https://docs.telerik.com/kendo-ui/controls/interactivity/sortable/how-to/nested-sortables

$(document).ready(function() {
    
    function placeholder(element) {
        return $("<li style='color: red;' class='sortable' id='placeholder'>Drop Here!</li>");
    }

    $("#sortable-basic").kendoSortable({
        connectWith: ".sortable-div",
        filter: ".sortable", // Filter only list items that are direct child of the Sortable container.
        // Use ".list-item" to allow parent items to use the nested Sortable.
        
        placeholder: placeholder
    });
    $(".sortable-div").kendoSortable({
        connectWith: "#sortable-basic",
        filter: ".sortable",
        placeholder: placeholder
    });
});

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

#playlist {
    margin: 30px auto;
    width: 300px;
    background-color: #f3f5f7;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,.1);
}

#playlist-title span {
    display: none;
}

#sortable-basic {
    padding: 0;
    margin: 0;
}

li.sortable {
    list-style-type: none;
    padding: 6px 8px;
    margin: 0;
    color: #666;
    font-size: 1.2em;
    cursor: move;
}

li.sortable:last-child {
    border-bottom: 0;
    border-radius: 0 0 4px 4px;
}

li.sortable span {
    display: block;
    float: right;
    color: #666;
}

li.sortable:hover {
    background-color: #dceffd;
}

li.hint {
    display: block;
    width: 200px;
    background-color: #52aef7;
    color: #fff;
}

li.hint:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid #52aef7;
    position: absolute;
    left: 216px;
    top: 8px;
}

li.hint:last-child {
    border-radius: 4px;
}

li.hint span {
    color: #fff;
}

li.placeholder {
    background-color: #dceffd;
    color: #52aef7;
    text-align: right;
}

<link href="https://kendo.cdn.telerik.com/2019.3.1023/styles/kendo.default-v2.min.css" rel="stylesheet"/>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.3.1023/js/kendo.all.min.js"></script>


<div id="example">
    <div id="playlist">
        <div id="playlist-title"><span>My Playlist</span></div>
        <ul id="sortable-basic">
            <ul class="sortable sortable-div">
                <li>drag div</li>
                <li class="sortable">Papercut <span>3:04</span></li>
                <li class="sortable">One Step Closer <span>2:35</span></li>
            </ul>
            <ul class="sortable sortable-div">
                <li>drag div</li>
                <li class="sortable">With You <span>3:23</span></li>
                <li class="sortable">Points of Authority <span>3:20</span></li>
            </ul>
            <ul class="sortable sortable-div">
                <li>drag div</li>
                <li class="sortable">Crawling <span>3:29</span></li>
                <li class="sortable">Runaway <span>3:03</span></li>
            </ul>
            <ul class="sortable sortable-div">
                <li>drag div</li>
                <li class="sortable">By Myself <span>3:09</span></li>
                <li class="sortable">In the End <span>3:36</span></li>
            </ul>
            <ul class="sortable sortable-div">
                <li>drag div</li>
                <li class="sortable">A Place for My Head <span>3:04</span></li>
                <li class="sortable">Forgotten <span>3:14</span></li>
            </ul>
            <ul class="sortable sortable-div">
                <li>drag div</li>
                <li class="sortable">Cure for the Itch <span>2:37</span></li>
                <li class="sortable">Pushing Me Away <span>3:11</span></li>
            </ul>
        </ul>
    </div>
</div>