Kendo Draggable和DropTarget无法正常工作

Question

我正在尝试让用户将列表项拖到另一个未排序的列表中。我可以“拿起”列表项，所以Draggable似乎可以工作但是当我在DropTarget上面发布它们时，它们不会被添加。我添加了一些事件来检查Draggable和DropTarget是否都正确初始化，看起来好像是。

HTML：

<ul id="recipe-steps">
    <li>Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
</ul>
<ul id="available-steps">
    <li>Step 1</li>
    <li>Step 2</li>
    <li>Step 3</li>
</ul>

DropTarget JS代码：

$("#recipe-steps").kendoDropTarget({
    dragleave: function (e) {
        e.draggable.hint.css("opacity", 1);
    },
    dragenter: function (e) {
        e.draggable.hint.css("opacity", 0.3);
    }
});

Draggable JS代码：

$("#available-steps").kendoDraggable({
    filter: "li",
    ignore: "input",
    hint: function(element) { return element.clone(); }
});

因此，此处的用例是用户可以将步骤从可用步骤拖到配方步骤。