EasyUI 限制可拖动框(Constrain Draggable)

拖拽 Draggable

源代码

import { Component } from '@angular/core';

@Component({
	selector: 'app-root',
	template: `
		<h2>Constrain Draggable</h2>
		<eui-panel [bodyStyle]="{position:'relative'}" 
				[style.width.px]="containerWidth"
				[style.height.px]="containerHeight">
			<div euiDraggable style="border:1px solid #ccc"
					[style.width.px]="dragWidth"
					[style.height.px]="dragHeight"
					(drag)="onDrag($event)">
				<p style="text-align:center">Drag Me</p>
			</div>
		</eui-panel>

	`
})
export class AppComponent {
	containerWidth: number = 500;
	containerHeight: number = 300;
	dragWidth: number = 100;
	dragHeight: number = 100;

	onDrag(event){
		var d = event;
		if (d.left < 0){d.left = 0}
		if (d.top < 0){d.top = 0}
		if (d.left + this.dragWidth > this.containerWidth - 2){
			d.left = this.containerWidth - 2 - this.dragWidth;
		}
		if (d.top + this.dragHeight > this.containerHeight - 2){
			d.top = this.containerHeight - 2 - this.dragHeight;
		}
		d.target.applyDrag();
	}
}

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