jquery - 如何使用多个互相连接的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 选项。

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

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

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

我创建了一个演示，部分展示了您所需要的内容。

<强> See Demo

请告诉我这是否有帮助。