adriatic/app.html

## app.html
<template>
  <require from="./basic-use.css"></require>
  <div id="example">
    <div class="demo-section k-content">
        <div ak-drop-target
             ref="droptargetDiv"
             id="droptarget"
             k-on-dragenter.delegate="droptargetOnDragEnter($event.detail)"
             k-on-dragleave.delegate="droptargetOnDragLeave($event.detail)"
             k-on-drop.delegate="droptargetOnDrop($event.detail)"
             class="k-header">Drag the small circle here.</div>

        <div ak-draggable="k-widget.two-way: draggable; k-hint.call: onHint()"
             ref="draggableDiv"
             class="basic-use-draggable"
             k-on-dragstart.delegate="draggableOnDragStart($event.detail)"
             k-on-dragend.delegate="draggableOnDragEnd($event.detail)"></div>
    </div>
    <div class="box wide">
        <div class="box-col">
            <h4>Axis</h4>
            <ul class="options">
                <li>
                  <ak-drop-down-list k-value.two-way="axis" k-on-change.delegate="axisChanged()">
                    <select id="axis">
                        <option value="">(none)</option>
                        <option value="x">Horizontal (x)</option>
                        <option value="y">Vertical (y)</option>
                    </select>
                  </ak-drop-down-list>
                </li>
            </ul>
        </div>
        <div class="box-col">
        <h4>cursorOffset</h4>
            <ul class="options">
                <li>
                  <label for="cursorOffset">
                    <input type="checkbox" checked.bind="cursorOffset" change.delegate="cursorOffsetChanged()"> Enable
                    <code>cursorOffset</code>
                  </label>
                </li>
            </ul>
        </div>
    </div>
  </div>
</template>

## app.js
export class BasicUse {
  axis = '';
  cursorOffset = false;

  draggableOnDragStart(e) {
    $(this.draggableDiv).addClass('hollow');
    $(this.droptarget).text('Drop here.');
    $(this.droptarget).removeClass('painted');
  }

  droptargetOnDragEnter(e) {
    $(this.droptargetDiv).text('Now drop...');
    $(this.droptargetDiv).addClass('painted');
  }

  droptargetOnDragLeave(e) {
    $(this.droptargetDiv).text('Drop here.');
    $(this.droptargetDiv).removeClass('painted');
  }

  droptargetOnDrop(e) {
    $(this.droptargetDiv).text('You did great!');
    $(this.draggableDiv).removeClass('hollow');
  }

  onHint(e) {
    return $(this.draggableDiv).clone();
  }

  draggableOnDragEnd(e) {
    if (this.draggable.dropped) {
      // drag ended outside of any droptarget
      $(this.droptarget).text('Try again!');
    }

    $(this.draggableDiv).removeClass('hollow');
  }

  axisChanged() {
    this.draggable.options.axis = this.axis;
  }

  cursorOffsetChanged() {
    if (this.cursorOffset) {
      this.draggable.options.cursorOffset = { top: 10, left: 10 };
    } else {
      this.draggable.options.cursorOffset = null;
    }
  }
}//

## basic-use.css
.basic-use-draggable {
  cursor: move;
  position: absolute;
  top: 260px;
  left: 50%;
  margin-left: -28px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #03a9f4;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
}
#drag-and-drop-basic-use .painted {
  background-color: #03a9f4;
  color: #fff;
}

#drag-and-drop-basic-use #draggable.hollow
{
  cursor: default;
  background: #ececec;
}

#drag-and-drop-basic-use #droptarget
{
  height: 200px;
  width: 200px;
  font-size: 14px;
  border-radius: 50%;
  text-align: center;
  line-height: 200px;
  margin: 0 auto;
  cursor: default;
  border: 1px solid #999;
}

#drag-and-drop-basic-use .demo-section
{
  height: 350px;
  position: relative;
}

## index.html
<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
    <script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

## main.js
export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

  aurelia.start().then(a => a.setRoot());
}
	<template>
	<require from="./basic-use.css"></require>
	<div id="example">
	<div class="demo-section k-content">
	<div ak-drop-target
	ref="droptargetDiv"
	id="droptarget"
	k-on-dragenter.delegate="droptargetOnDragEnter($event.detail)"
	k-on-dragleave.delegate="droptargetOnDragLeave($event.detail)"
	k-on-drop.delegate="droptargetOnDrop($event.detail)"
	class="k-header">Drag the small circle here.</div>

	<div ak-draggable="k-widget.two-way: draggable; k-hint.call: onHint()"
	ref="draggableDiv"
	class="basic-use-draggable"
	k-on-dragstart.delegate="draggableOnDragStart($event.detail)"
	k-on-dragend.delegate="draggableOnDragEnd($event.detail)"></div>
	</div>
	<div class="box wide">
	<div class="box-col">
	<h4>Axis</h4>
	<ul class="options">
	<li>
	<ak-drop-down-list k-value.two-way="axis" k-on-change.delegate="axisChanged()">
	<select id="axis">
	<option value="">(none)</option>
	<option value="x">Horizontal (x)</option>
	<option value="y">Vertical (y)</option>
	</select>
	</ak-drop-down-list>
	</li>
	</ul>
	</div>
	<div class="box-col">
	<h4>cursorOffset</h4>
	<ul class="options">
	<li>
	<label for="cursorOffset">
	<input type="checkbox" checked.bind="cursorOffset" change.delegate="cursorOffsetChanged()"> Enable
	<code>cursorOffset</code>
	</label>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</template>
	export class BasicUse {
	axis = '';
	cursorOffset = false;

	draggableOnDragStart(e) {
	$(this.draggableDiv).addClass('hollow');
	$(this.droptarget).text('Drop here.');
	$(this.droptarget).removeClass('painted');
	}

	droptargetOnDragEnter(e) {
	$(this.droptargetDiv).text('Now drop...');
	$(this.droptargetDiv).addClass('painted');
	}

	droptargetOnDragLeave(e) {
	$(this.droptargetDiv).text('Drop here.');
	$(this.droptargetDiv).removeClass('painted');
	}

	droptargetOnDrop(e) {
	$(this.droptargetDiv).text('You did great!');
	$(this.draggableDiv).removeClass('hollow');
	}

	onHint(e) {
	return $(this.draggableDiv).clone();
	}

	draggableOnDragEnd(e) {
	if (this.draggable.dropped) {
	// drag ended outside of any droptarget
	$(this.droptarget).text('Try again!');
	}

	$(this.draggableDiv).removeClass('hollow');
	}

	axisChanged() {
	this.draggable.options.axis = this.axis;
	}

	cursorOffsetChanged() {
	if (this.cursorOffset) {
	this.draggable.options.cursorOffset = { top: 10, left: 10 };
	} else {
	this.draggable.options.cursorOffset = null;
	}
	}
	}//
	.basic-use-draggable {
	cursor: move;
	position: absolute;
	top: 260px;
	left: 50%;
	margin-left: -28px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background-color: #03a9f4;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.23), 0 3px 10px rgba(0, 0, 0, 0.16);
	}
	#drag-and-drop-basic-use .painted {
	background-color: #03a9f4;
	color: #fff;
	}

	#drag-and-drop-basic-use #draggable.hollow
	{
	cursor: default;
	background: #ececec;
	}

	#drag-and-drop-basic-use #droptarget
	{
	height: 200px;
	width: 200px;
	font-size: 14px;
	border-radius: 50%;
	text-align: center;
	line-height: 200px;
	margin: 0 auto;
	cursor: default;
	border: 1px solid #999;
	}

	#drag-and-drop-basic-use .demo-section
	{
	height: 350px;
	position: relative;
	}
	<!doctype html>
	<html>
	<head>
	<title>Aurelia KendoUI bridge</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.common.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.rtl.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.default.min.css">
	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.1.226/styles/kendo.mobile.all.min.css">
	<script src="https://kendo.cdn.telerik.com/2016.1.226/js/jszip.min.js"></script>
	</head>
	<body aurelia-app="main">
	<h1>Loading...</h1>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
	<script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/0.3.5/config2.js"></script>
	<script>
	System.import('aurelia-bootstrapper');
	</script>
	</body>
	</html>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-kendoui-bridge', kendo => kendo.pro());

	aurelia.start().then(a => a.setRoot());
	}