我试图让用户将列表项拖到另一个未排序的列表中。我可以“拾取”列表项,因此 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);
}
});
可拖动的JS代码:
$("#available-steps").kendoDraggable({
filter: "li",
ignore: "input",
hint: function(element) { return element.clone(); }
});
所以这里的用例是用户可以将一个步骤从可用步骤拖到配方步骤。