Angular 如何实现两个剑道排序:一个具有固定元素(调色板对象),另一个具有每个元素的副本
我有两个剑道可排序列表,列表A和列表B。列表A有固定对象(项目1、项目2、项目3),列表B为空。每次我将对象从列表A拖动到列表B时,我都希望被克隆到列表B中 我注意到,如果我尝试拖动同一项两次或更多次,它总是列表a中列出的同一对象的副本 如何将对象从列表A拖动到列表B克隆它Angular 如何实现两个剑道排序:一个具有固定元素(调色板对象),另一个具有每个元素的副本,angular,kendo-ui,kendo-ui-angular2,kendo-angular-ui,kendo-sortable,Angular,Kendo Ui,Kendo Ui Angular2,Kendo Angular Ui,Kendo Sortable,我有两个剑道可排序列表,列表A和列表B。列表A有固定对象(项目1、项目2、项目3),列表B为空。每次我将对象从列表A拖动到列表B时,我都希望被克隆到列表B中 我注意到,如果我尝试拖动同一项两次或更多次,它总是列表a中列出的同一对象的副本 如何将对象从列表A拖动到列表B克隆它 谢谢我确实尝试了您对剑道排序表的查询,但由于调色板数组已刷新,因此无法获得任何工作代码,但我无法使排序表刷新以显示更新的数据;但是你可以试试这样的东西。 当您将项目从A移动到B时,它将从A中删除并添加到B中,但您是否可以防止
谢谢我确实尝试了您对剑道排序表的查询,但由于调色板数组已刷新,因此无法获得任何工作代码,但我无法使排序表刷新以显示更新的数据;但是你可以试试这样的东西。 当您将项目从A移动到B时,它将从A中删除并添加到B中,但您是否可以防止默认设置并让A保留该项目并向B中添加新的数据项。我使用了排序表
从'@angular/core'导入{组件,视图封装,输入};
从“@progress/kendo angular sortable”导入{DataEvent、DragStartEvent、DragEndEvent、DragOverEvent、NavigateEvent};
@组成部分({
选择器:“我的应用程序”,
模板:`
团队A:{{paletes.TeamA | json}
团队B:{{paletes.TeamB|json}
A队
B队
`,
样式URL:['styles.css'],
封装:视图封装。无
})
导出类AppComponent{
@输入()文本内容;
公共选项板={
“TeamA”:[“彼得·弗兰肯”、“西蒙·克劳瑟”、“凯瑟琳·杜威”、“利诺·罗德里格斯”、“保罗·阿科蒂”],
“团队B”:[]
};
public-onDataAdd(src:string,dest:string,e:any):void{
e、 预防默认值();
this.paletes[dest].push(e.dataItem);
}
}
欢迎来到stackoverflow。看一看这篇关于如何创建一个应用程序的文章。如果没有看到您的代码,几乎不可能提供帮助。
import { Component, ViewEncapsulation, Input } from '@angular/core';
import { DataEvent, DragStartEvent, DragEndEvent, DragOverEvent, NavigateEvent } from '@progress/kendo-angular-sortable';
@Component({
selector: 'my-app',
template: `
<div class="example-config">
<h5>Team A: {{palettes.TeamA | json}}</h5>
<h5>Team B: {{palettes.TeamB | json}}</h5>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-6 team">
<h5>Team A</h5>
<kendo-sortable
[kendoSortableBinding]="palettes.TeamA"
zone="twoWay"
emptyText="Move employees from Team B to Team A."
class="row"
itemClass="employee"
[emptyItemStyle]="{'min-height': '150px', width:'100%'}"
emptyItemClass="empty"
activeItemClass="employee active">
</kendo-sortable>
</div>
<div class="col-xs-12 col-sm-6 team team-b">
<h5>Team B</h5>
<kendo-sortable [kendoSortableBinding]="palettes.TeamB"
zone="twoWay"
emptyText="Move employees from Team A to Team B."
class="row"
itemClass="employee"
[emptyItemStyle]="{'min-height': '150px', width:'100%'}"
emptyItemClass="empty"
activeItemClass="employee active"
(dataAdd)="onDataAdd('TeamA','TeamB', $event)">
</kendo-sortable>
</div>
</div>
</div>
`,
styleUrls: ['styles.css'],
encapsulation: ViewEncapsulation.None
})
export class AppComponent {
@Input() textContent;
public palettes = {
'TeamA': ['Peter Franken', 'Simon Crowther', 'Catherine Dewey','Lino Rodriguez', 'Paolo Accorti'],
'TeamB': []
};
public onDataAdd(src: string, dest: string, e: any): void {
e.preventDefault();
this.palettes[dest].push(e.dataItem);
}
}