如何使用多个相互连接的 KendoListBox

Question

我想尝试创建多个列表框，它可以正常拖放并拖放回主列表框。

但是当我尝试从第二个框选择到主框时，转移到按钮未激活

像这样的整个过程，当我点击转移到按钮时，我应该询问转移到哪里应该弹出带有 3 个单选按钮的弹出窗口。

提前谢谢你

$("#optional").kendoListBox({
            dropSources: ["selected","selected2","selected3"],
			connectWith: ["selected","selected2","selected3"],
			draggable: { placeholder: customPlaceholder,customPlaceholder2,customPlaceholder3 },
            toolbar: {
                tools: ["transferTo", "transferFrom", "transferAllTo", "transferAllFrom"]
            },
			
        });

        $("#selected").kendoListBox({
            draggable: { placeholder: customPlaceholder },
            dropSources: ["optional"],
            connectWith: "optional"
        });
		$("#selected2").kendoListBox({
            draggable: { placeholder: customPlaceholder2 },
            dropSources: ["optional"],
            connectWith: "optional"
        });
		$("#selected3").kendoListBox({
            draggable: { placeholder: customPlaceholder3 },
            dropSources: ["optional"],
            connectWith: "optional"
        });
		
		function customPlaceholder(draggedItem) {
            return draggedItem
                .clone()
                .addClass("custom-placeholder")
                .removeClass("k-ghost");
        }
		function customPlaceholder2(draggedItem) {
			return draggedItem
				.clone()
				.addClass("custom-placeholder")
				.removeClass("k-ghost");
		}
		function customPlaceholder3(draggedItem) {
            return draggedItem
                .clone()
                .addClass("custom-placeholder")
                .removeClass("k-ghost");
        }

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common-material.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.min.css" rel="stylesheet" />
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
 <div class="demo-section k-content js-height-grey">
										<select id="optional" >
											<option>Steven White</option>
											<option>Nancy King</option>
											<option>Nancy Davolio</option>
											<option>Robert Davolio</option>
											<option>Michael Leverling</option>
											<option>Andrew Callahan</option>
											<option>Michael Suyama</option>
										</select>            
										<select id="selected"></select>
										<select id="selected2"></select>
										<select id="selected3"></select>
									</div>

Answer 1

要在其他列表框上启用工具栏按钮，您必须为每个列表框指定 toolbar 和 connectWith 选项。

在您的代码 sn-p 中，对于第一个列表框，您已为 connectWith 选项分配了一个 ID 数组，根据 kendo 网站上的 API document，该选项无效。您的第一个列表框的 draggable 选项对于 placeholder 属性也有无效的函数集。

此外，如果所有实现都相同，则不需要单独的占位符函数（如 customPlaceholder2 和 customPlaceholder3）。

如果我错了，请纠正我，但我认为 kendo 没有任何用于列表框小部件的内置功能，其中带有单选按钮的弹出窗口询问将项目从列表框中移动到哪里。如果您看到过类似的内容，请提供任何链接或来源。

我创建了一个演示，部分显示了您的需求。

See Demo

如果有帮助，请告诉我。