Question

我想尝试创建多个列表框，其工作正常拖放并拖放回主列表框。

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

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

提前谢谢

＆＃13;

$("#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");
        }

＆＃13;

<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>

＆＃13;

Answer 1

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

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

此外，如果所有人的实施方式相同，则您不需要单独的占位符功能（例如customPlaceholder2和customPlaceholder3）。

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

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

<强> See Demo

如果有帮助，请告诉我。

如何使用多个KendoListBox相互连接

1 个答案: