3cp/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dumber Gist</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <base href="/">
</head>
<!--
Dumber Gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to "main" (data-main attribute on script)
which is your src/main.js.
-->
<body>
  <my-app></my-app>
  <script src="/dist/entry-bundle.js" data-main="main"></script>
</body>
</html>

## package.json
{
  "dependencies": {
    "aurelia": "latest",
    "aurelia2-dnd": "^0.3.0"
  }
}

## src\box.css
.box {
  position: absolute;
  cursor: pointer;
  box-sizing: border-box;
  width: 80px;
  height: 40px;
  border: 1px solid #555;
  background: white;
  padding: 5px;
}

## src\box.html
<div
  ref="dndElement"
  class="box"
  style.bind="positionCss"
  show.bind="!draggingMe"
>
  ${item.name}
</div>

## src\box.js
import {inject, bindable} from 'aurelia';
import {DndService} from 'aurelia2-dnd';

@inject(DndService)
export class Box {
  @bindable item;

  constructor(dndService) {
    this.dndService = dndService;
  }

  attached() {
    this.dndService.addSource(this);
  }

  detached() {
    this.dndService.removeSource(this);
  }

  dndModel() {
    return {
      type: 'moveItem',
      item: this.item
    };
  }

  get positionCss() {
    const x = (this.item && this.item.x) || 0;
    const y = (this.item && this.item.y) || 0;

    return {
      left: x + 'px',
      top: y + 'px'
    };
  }

  get draggingMe() {
    return this.dndService.isProcessing &&
           this.dndService.model.item === this.item;
  }
}

## src\container.css
.container {
  position: relative;
  box-sizing: border-box;
  width: 300px;
  height: 300px;
  outline: 1px solid #555;
  overflow: hidden;
  margin: 10px;
}

## src\container.html
<import from="./box"></import>

<div ref="dndElement" class="container">
  <box repeat.for="item of items" item.bind="item"></box>
</div>

## src\container.js
import {inject} from 'aurelia';
import {DndService} from 'aurelia2-dnd';

@inject(DndService)
export class Container {
  items = [
    {name: 'A', x: 20, y: 20},
    {name: 'B', x: 50, y: 200},
    {name: 'C', x: 200, y: 100}
  ];

  constructor(dndService) {
    this.dndService = dndService;
  }

  attached() {
    this.dndService.addTarget(this);
  }

  detached() {
    this.dndService.removeTarget(this);
  }

  dndCanDrop(model) {
    return model.type === 'moveItem';
  }

  dndDrop(location) {
    const {item} = this.dnd.model;
    const {previewElementRect, targetElementRect} = location;
    const newLoc = {
      x: previewElementRect.x - targetElementRect.x,
      y: previewElementRect.y - targetElementRect.y
    };
    item.x = newLoc.x;
    item.y = newLoc.y;

    // move the item to end of array, in order to show it above others
    const idx = this.items.indexOf(item);
    if (idx >= 0) {
      this.items.splice(idx, 1);
      this.items.push(item);
    }
  }
}

## src\main.js
import Aurelia from 'aurelia';
import { MyApp } from './my-app';

Aurelia.app(MyApp).start();


## src\my-app.html
<import from="./container"></import>
<container></container>

## src\my-app.js
export class MyApp {
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dumber Gist</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<base href="/">
	</head>
	<!--
	Dumber Gist uses dumber bundler, the default bundle file
	is /dist/entry-bundle.js.
	The starting module is pointed to "main" (data-main attribute on script)
	which is your src/main.js.
	-->
	<body>
	<my-app></my-app>
	<script src="/dist/entry-bundle.js" data-main="main"></script>
	</body>
	</html>
	{
	"dependencies": {
	"aurelia": "latest",
	"aurelia2-dnd": "^0.3.0"
	}
	}
	.box {
	position: absolute;
	cursor: pointer;
	box-sizing: border-box;
	width: 80px;
	height: 40px;
	border: 1px solid #555;
	background: white;
	padding: 5px;
	}
	<div
	ref="dndElement"
	class="box"
	style.bind="positionCss"
	show.bind="!draggingMe"
	>
	${item.name}
	</div>
	import {inject, bindable} from 'aurelia';
	import {DndService} from 'aurelia2-dnd';

	@inject(DndService)
	export class Box {
	@bindable item;

	constructor(dndService) {
	this.dndService = dndService;
	}

	attached() {
	this.dndService.addSource(this);
	}

	detached() {
	this.dndService.removeSource(this);
	}

	dndModel() {
	return {
	type: 'moveItem',
	item: this.item
	};
	}

	get positionCss() {
	const x = (this.item && this.item.x) \|\| 0;
	const y = (this.item && this.item.y) \|\| 0;

	return {
	left: x + 'px',
	top: y + 'px'
	};
	}

	get draggingMe() {
	return this.dndService.isProcessing &&
	this.dndService.model.item === this.item;
	}
	}
	.container {
	position: relative;
	box-sizing: border-box;
	width: 300px;
	height: 300px;
	outline: 1px solid #555;
	overflow: hidden;
	margin: 10px;
	}
	<import from="./box"></import>

	<div ref="dndElement" class="container">
	<box repeat.for="item of items" item.bind="item"></box>
	</div>
	import {inject} from 'aurelia';
	import {DndService} from 'aurelia2-dnd';

	@inject(DndService)
	export class Container {
	items = [
	{name: 'A', x: 20, y: 20},
	{name: 'B', x: 50, y: 200},
	{name: 'C', x: 200, y: 100}
	];

	constructor(dndService) {
	this.dndService = dndService;
	}

	attached() {
	this.dndService.addTarget(this);
	}

	detached() {
	this.dndService.removeTarget(this);
	}

	dndCanDrop(model) {
	return model.type === 'moveItem';
	}

	dndDrop(location) {
	const {item} = this.dnd.model;
	const {previewElementRect, targetElementRect} = location;
	const newLoc = {
	x: previewElementRect.x - targetElementRect.x,
	y: previewElementRect.y - targetElementRect.y
	};
	item.x = newLoc.x;
	item.y = newLoc.y;

	// move the item to end of array, in order to show it above others
	const idx = this.items.indexOf(item);
	if (idx >= 0) {
	this.items.splice(idx, 1);
	this.items.push(item);
	}
	}
	}
	import Aurelia from 'aurelia';
	import { MyApp } from './my-app';

	Aurelia.app(MyApp).start();