Javascript 可排序中的剑道UI可排序

我正在努力使以下各项发挥作用：

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

我的播放列表

拖拽部
剪纸3:04
更近一步2:35
拖拽部
与您一起3:23
权限点3:20
拖拽部
爬行3:29
失控3:03
拖拽部
我自己3:09
最后3:36
拖拽部
我的头的位置3:04
被遗忘3:14
拖拽部
治疗瘙痒2:37
推我离开3:11

$（文档）.ready（函数（）{
$（“#可排序基本”）.kendoSortable({
提示：函数（元素）{
返回元素.clone（）.addClass（“提示”）；
},
占位符：函数（元素）{
return element.clone（）.addClass（“占位符”）.text（“放在这里”）；
},
游标偏移：{
前-10名，
左：-230
},
项目：“.sortable、.sortable div”
});
});

因此，计划如下： 你需要能够在其他div上下拖动div。这个很好用。但是你还需要能够在div中拖拽一个条目，这是我无法理解的部分。当我单击一个项目时，它会选择div。 就我个人而言，我似乎无法理解这一点。

请尝试下面的代码

为了您的更多参考，我收到了以下链接代码：

$（文档）.ready（函数（）{
函数占位符（元素）{
return$（“
放在这里！
”；
}
$（“#可排序基本”）.kendoSortable({
连接到：“.sortable div”，
筛选器：“.sortable”，//仅筛选作为可排序容器的直接子级的列表项。
//使用“.list item”允许父项使用嵌套的排序表。
占位符：占位符
});
$（“.sortable div”）.kendoSortable({
连接到：“#可排序基本”，
过滤器：“.sortable”，
占位符：占位符
});
});
#示例{
-webkit用户选择：无；
-moz用户选择：无；
-ms用户选择：无；
用户选择：无；
}
#播放列表{
保证金：30像素自动；
宽度：300px；
背景色：#f3f5f7；
边界半径：4px；
边框：1px实心rgba（0,0,0,1）；
}
#播放列表标题范围{
显示：无；
}
#可排序基本{
填充：0；
保证金：0；
}
可排序的{
列表样式类型：无；
填充：6px 8px；
保证金：0；
颜色：#666；
字体大小：1.2米；
光标：移动；
}
李：最后一个孩子{
边界底部：0；
边界半径：0 0 4px 4px；
}
可排序跨度{
显示：块；
浮动：对；
颜色：#666；
}
分类：悬停{
背景色：#dceffd；
}
提示{
显示：块；
宽度：200px；
背景色：#52aef7；
颜色：#fff；
}
提示：之后{
内容：“；
显示：块；
宽度：0；
身高：0；
边框顶部：6px实心透明；
边框底部：6px实心透明；
左边框：6px实心#52aef7；
位置：绝对位置；
左：216px；
顶部：8px；
}
提示：最后一个孩子{
边界半径：4px；
}
李彦宏{
颜色：#fff；
}
li.占位符{
背景色：#dceffd；
颜色：#52aef7；
文本对齐：右对齐；
}

我的播放列表


拖拽部
剪纸3:04
更近一步2:35


拖拽部
与您一起3:23
权限点3:20


拖拽部
爬行3:29
失控3:03


拖拽部
我自己3:09
最后3:36


拖拽部
我的头的位置3:04
被遗忘3:14


拖拽部
治疗瘙痒2:37
推我离开3:11


你能给我们举个例子吗？@andrescpacheco问题中的代码就是我现在得到的。所以我不知道我还能举什么样的例子。你检查过答案吗？它有点有效。但我能把一个div放到一个div里，这不可能。我会尝试自己调整。但是如果你知道一种方法，请随时告诉我。你可以使用nestable，它有更多的灵活性