Web Demo Mobile Demo Angular Demo Vue Demo React Demo

可拖拽的 Droppable

源代码
import { Component, ViewEncapsulation } from '@angular/core';

@Component({
	selector: 'app-root',
	template: `
		<h2>Shopping Cart</h2>
		<eui-layout style="height:250px;max-width:600px">
			<eui-datalist style="height:100%"
					[data]="productData"
					itemCls="dataitem">
				<ng-template euiItemTemplate let-row>
					<div class="product" euiDraggable
							[proxy]="proxy" 
							[revert]="true"
							(dragStart)="onDragStart(row)">
						<img src="https://www.jeasyui.com/tutorial/datagrid/images/{{row.itemid}}.png">
						<p>{{row.name}}</p>
						<p>{{row.listprice}}</p>
					</div>
				</ng-template>
			</eui-datalist>
			<eui-layout-panel region="east" euiDroppable style="width:30%;"
					bodyCls="f-row"
					[bodyStyle]="bodyStyle"
					(dragEnter)="isover=true"
					(dragLeave)="isover=false"
					(drop)="isover=false;onDrop()">
				<eui-datagrid class="f-full"
						[border]="false"
						[showFooter]="true" 
						[data]="cartData"
						[footerData]="sumData">
					<eui-grid-column [field]="'name'" [title]="'Name'"></eui-grid-column>
					<eui-grid-column [field]="'listprice'" [title]="'Price'" align="right"></eui-grid-column>
				</eui-datagrid>
			</eui-layout-panel>
		</eui-layout>
		<eui-draggable-proxy #proxy>
			<div *ngIf="dragItem" class="product product-proxy">
				<img src="https://www.jeasyui.com/tutorial/datagrid/images/{{dragItem.itemid}}.png">
				<p>{{dragItem.name}}</p>
				<p>{{dragItem.listprice}}</p>
			</div>
		</eui-draggable-proxy>
	`,
	styles: [`
		.dataitem{
			width: 120px;
			height: 130px;
			float: left;
			margin: 6px;
		}
		.product{
			text-align: center;
		}
		.product img{
			height: 80px;
			padding: 10px;
		}
		.product p{
			font-size: 12px;
			margin: 5px 0;
		}
		.product-proxy{
			width: 120px;
			height: 130px;
			background: #FBEC88;
			border: 1px solid #ccc;
			opacity: 0.6;
		}
		.over{
			border:1px solid red;
		}
	`],
	encapsulation: ViewEncapsulation.None
})
export class AppComponent {
	isover = false;
	dragItem = null;
	cartData = [];
	sumData = [
		{name:'Total',listprice:0}
	];
	get bodyStyle() {
		return this.isover ? {border:'1px solid red'} : null;
	}

	onDragStart(row){
		this.dragItem = row;
	}

	onDrop(){
		let index = this.productData.indexOf(this.dragItem);
		if (index >= 0){
			this.productData = this.productData.filter((row,i) => i != index);
			this.cartData = [...this.cartData, this.dragItem];
			this.sumData = [
				{name:'Total',listprice:this.sumData[0].listprice+this.dragItem.listprice}
			];
		}
	}

	productData = [
		{"code":"FI-SW-01","name":"Koi","unitcost":10.00,"status":"P","listprice":36.50,"attr":"Large","itemid":"EST-1"},
		{"code":"K9-DL-01","name":"Dalmation","unitcost":12.00,"status":"P","listprice":18.50,"attr":"Spotted Adult Female","itemid":"EST-2"},
		{"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":38.50,"attr":"Venomless","itemid":"EST-3"},
		{"code":"RP-SN-01","name":"Rattlesnake","unitcost":12.00,"status":"P","listprice":26.50,"attr":"Rattleless","itemid":"EST-4"},
		{"code":"RP-LI-02","name":"Iguana","unitcost":12.00,"status":"P","listprice":35.50,"attr":"Green Adult","itemid":"EST-5"},
		{"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":158.50,"attr":"Tailless","itemid":"EST-6"},
		{"code":"FL-DSH-01","name":"Manx","unitcost":12.00,"status":"P","listprice":83.50,"attr":"With tail","itemid":"EST-7"},
		{"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":23.50,"attr":"Adult Female","itemid":"EST-8"},
		{"code":"FL-DLH-02","name":"Persian","unitcost":12.00,"status":"P","listprice":89.50,"attr":"Adult Male","itemid":"EST-9"},
		{"code":"AV-CB-01","name":"Amazon Parrot","unitcost":92.00,"status":"P","listprice":63.50,"attr":"Adult Male","itemid":"EST-10"}
	];
}
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { EasyUIModule } from 'easyui/easyui/easyui.module';


import { AppComponent }   from './app.component';

@NgModule({
  bootstrap: [
    AppComponent
  ],
  declarations: [
    AppComponent
  ],
  imports: [
    FormsModule,
    BrowserModule,
    HttpModule,
    EasyUIModule
  ]
})
export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

platformBrowserDynamic().bootstrapModule(AppModule);