Web Demo Mobile Demo Angular Demo Vue Demo React Demo

可拖拽的 Droppable

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

@Component({
	selector: 'app-root',
	template: `
		<h2>Basic Droppable</h2>
		<div class="dragitem" euiDraggable>
			<p style="text-align:center">Drag me</p>
		</div>
		<div class="droparea" euiDroppable 
				[class.over]="isover"
				[class.dropped]="dropped"
				(dragEnter)="onDragEnter()"
				(dragLeave)="onDragLeave()"
				(drop)="onDrop()">
			<p style="text-align:center">Drop here</p>
		</div>
	`,
	styles: [`
		.dragitem{
			width: 100px;
			height: 100px;
			border: 1px solid #ccc;
			background: #fafafa;
			position: absolute;
			top: 100px;
			z-index: 2;
		}
		.droparea{
			width: 300px;
			height: 200px;
			border: 1px solid #ccc;
			position: absolute;
			left: 200px;
			top: 100px;
			z-index: 1;
		}
		.over{
			background: #FBEC88;
		}
		.dropped{
			background: #AACCFF;
		}
	`]
})
export class AppComponent {
	dropped: boolean = false;
	isover: boolean = false;

	onDragEnter() {
		this.isover = true;
	}

	onDragLeave() {
		this.isover = false;
	}

	onDrop() {
		this.dropped = true;
	}
}
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);