我正在尝试从kendoSortable的站点拖出一个元素并将其放入kendoSortable。
我设置了kendoSortable的 connectWith 属性。但它没有用。
在Kendo UI演示中,我没有找到这种示例。
这是我的代码:
<h1>Sortable</h1>
<ul id="sortable">
<li class="list-item">Apples</li>
<li class="list-item">Grapefruits</li>
<li class="list-item">Bananas</li>
</ul>
<h1>Dragable</h1>
<ul id="dragable">
<li class="list-item">D1</li>
<li class="list-item">D2</li>
<li class="list-item">D3</li>
</ul>
<script>
$("#sortable").kendoSortable({
connectWith: "#dragable",
placeholder: function placeholder(element) {
return $("<li class='list-item' id='placeholder'>Drop Here!</li>");
},
});
$("#dragable li").kendoDraggable({
hint: function () {
return $("<li class='list-item' id='placeholder'>GOOOOOO!</li>");
}
});
$("#sortable").kendoDropTarget({
dragenter: function () {
console.log("enter");
},
dragleave: function () {
console.log("leve");
},
drop: function (e) {
}
});
</script>
中
答案 0 :(得分:1)
鉴于你的两个清单:
<h1>Sortable</h1>
<ul id="sortable">
<li class="list-item">Apples</li>
<li class="list-item">Grapefruits</li>
<li class="list-item">Bananas</li>
</ul>
<h1>Dragable</h1>
<ul id="dragable">
<li class="list-item">D1</li>
<li class="list-item">D2</li>
<li class="list-item">D3</li>
</ul>
并假设您要将其从第二个(#draggable
)复制到第一个(#sortable
),您应该在第二个(副本的原点)定义connectWith
):
$("#sortable").kendoSortable({
placeholder: function placeholder(element) {
return $("<li class='list-item' id='placeholder'>Drop Here 1!</li>");
}
});
$("#dragable").kendoSortable({
connectWith: "#sortable",
placeholder: function placeholder(element) {
return $("<li class='list-item' id='placeholder'>Drop Here 2!</li>");
}
});
同样重要的是要注意placeholder
可能都在两者中定义。当您从此列表移动时使用第一个,而当原点位于第二个列表中时使用第二个(无论丢弃是第一个还是第二个)。
您可以在此处查看:http://dojo.telerik.com/@OnaBai/oJIy