3cp · July 27, 2023 04:00
diff --git a/index.html b/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>
diff --git a/package.json b/package.json
 {
  "dependencies": {
    "aurelia": "latest",
    "aurelia2-dnd": "^0.3.0"
  }
 }
diff --git a/src\box.css b/src\box.css
 .box {
  position: absolute;
  cursor: pointer;
  box-sizing: border-box;
  width: 80px;
  height: 40px;
  border: 1px solid #555;
  background: white;
  padding: 5px;
 }
diff --git a/src\box.html b/src\box.html
 <div
  ref="dndElement"
  class="box"
  style.bind="positionCss"
  show.bind="!draggingMe"
 >
  ${item.name}
 </div>
diff --git a/src\box.js b/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;
  }
 }
diff --git a/src\container.css b/src\container.css
 .container {
  position: relative;
  box-sizing: border-box;
  width: 300px;
  height: 300px;
  outline: 1px solid #555;
  overflow: hidden;
  margin: 10px;
 }
diff --git a/src\container.html b/src\container.html
 <import from="./box"></import>

 <div ref="dndElement" class="container">
  <box repeat.for="item of items" item.bind="item"></box>
 </div>
diff --git a/src\container.js b/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);
    }
  }
 }
diff --git a/src\main.js b/src\main.js
 import Aurelia from 'aurelia';
 import { MyApp } from './my-app';

 Aurelia.app(MyApp).start();

diff --git a/src\my-app.html b/src\my-app.html
 <import from="./container"></import>
 <container></container>
diff --git a/src\my-app.js b/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();