3.2.9 transfer

说明: 用直观的方式在两栏中移动元素，完成选择行为

使用及参数说明:

<div id="transfer" class="xui-flex xui-transfer"></div>

new xui.transfer({
	id: string,
	prevList: array,
	lastList: array,
	fn(data){
		{
			leftList: [
				{
					value: "javascript",
					disabled: "false"
				}
			],
			rightList: [
				{
					value: "todo",
					disabled: "false"
				}
			]
		}
	}
});

• id表示穿梭框容器,必传
• prevList表示穿梭框左边显示的数据(原始数据)
• lastList表示穿梭框右边显示的数据(目标数据)
• fn表示选择后的回调,返回一个对象包含原始数据和目标数据
• 没有你想要的功能? 快联系我: xumeng0611@gmail.com添加吧

效果展示

1.常规惯例,我们实现一个最简单的穿梭框

<div id="transfer" class="xui-flex xui-transfer"></div>

new xui.transfer({
	id: 'transfer',
	prevList: [
		{
			value: 'vue',
			disabled: "false",
		},
		{
			value: 'react',
			disabled: "false",
		},
		{
			value: 'angular',
			disabled: "false",
		},
	],
	lastList: [
		{
			value: 'todo',
			disabled: "false",
		}
	]
});

2.接下来,我们来配置一些其他的元素,这里我们新增了选择后的回调以及某些项不可选.

```html

```

new xui.transfer({
	id: 'transfer1',
	prevList: [
		{
			value: 'javascript and something else',
			disabled: "false",
		},
		{
			value: 'vue',
			disabled: "false",
		},
		{
			value: 'react',
			disabled: "true",
		},
		{
			value: 'angular',
			disabled: "false",
		},
		{
			value: 'es6',
			disabled: "false",
		},
		{
			value: 'es7',
			disabled: "true",
		},
		{
			value: 'es8',
			disabled: "false",
		},
	],
	lastList: [
		{
			value: 'todo',
			disabled: "false",
		},
		{
			value: 'todo1',
			disabled: "true",
		}
	],
	fn: function(data){
		console.log(data);
	}
});