Created
February 20, 2017 08:58
-
-
Save JeroenVinke/64ff31d9768c426ba78ef87809338a92 to your computer and use it in GitHub Desktop.
Drag and Drop: area
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <require from="./area.css!css"></require> | |
| <require from="aurelia-kendoui-bridge/draggable/draggable"></require> | |
| <require from="aurelia-kendoui-bridge/drop-target/drop-target-area"></require> | |
| <div id="example"> | |
| <div class="demo-section k-content" if.bind="visible"> | |
| <div ak-drop-target-area="k-filter: .test1, .test2" | |
| k-on-dragenter.delegate="droptargetOnDragEnter($event.detail)" | |
| k-on-dragleave.delegate="droptargetOnDragLeave($event.detail)" | |
| k-on-drop.delegate="droptargetOnDrop($event.detail)" | |
| ref="dropDiv" | |
| id="droptarget" | |
| ak-drop-target-area.ref="drop"> | |
| <div class="test1">Drag the small circle here ...</div> | |
| <div class="test2">... Or here.</div> | |
| </div> | |
| <div ak-draggable="k-widget.two-way: drag; k-hint.call: hint()" | |
| k-on-dragstart.delegate="draggableOnDragStart()" | |
| k-on-dragend.delegate="draggableOnDragEnd()" | |
| ref="dragDiv" | |
| class="drag-and-drop-area-draggable"> | |
| Drag | |
| </div> | |
| </div> | |
| </div> | |
| <button click.delegate="toggleVisible()">Hide and show</button> | |
| </template> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export class Area { | |
| visible = true; | |
| hint() { | |
| // when using k-widget, remove the ak-draggable attribute of the hint as it is | |
| // not going to work otherwise | |
| return $($(this.dragDiv).removeAttr('ak-draggable')).clone(); | |
| } | |
| draggableOnDragStart(e) { | |
| $(this.dragDiv).addClass('hollow'); | |
| $(this.dropDiv).html('<div class="test1">(Drop here)</div><div class="test2">(Drop here)</div>'); | |
| } | |
| droptargetOnDragEnter(e) { | |
| $(e.dropTarget).text('Now you can drop it.'); | |
| } | |
| droptargetOnDragLeave(e) { | |
| $(e.dropTarget).text('(Drop here)'); | |
| } | |
| droptargetOnDrop(e) { | |
| $(e.dropTarget).text('You did great!'); | |
| $(this.dragDiv).removeClass('hollow'); | |
| } | |
| draggableOnDragEnd(e) { | |
| if (!this.drag.dropped) { | |
| // drag ended outside of any droptarget | |
| $(this.dropDiv).html('<div class="test1">(Try again)</div><div class="test2">(Try again)</div>'); | |
| } | |
| $(this.dragDiv).removeClass('hollow'); | |
| } | |
| toggleVisible(){ | |
| this.visible = !this.visible; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .demo-section { | |
| padding-top: 100px; | |
| position: relative; | |
| } | |
| .drag-and-drop-area-draggable { | |
| cursor: move; | |
| position: absolute; | |
| top: 30px; | |
| 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); | |
| } | |
| #droptarget { | |
| padding: 20px; | |
| cursor: default; | |
| vertical-align: middle; | |
| text-align: center; | |
| border: 2px dotted #ccc; | |
| } | |
| .test1, | |
| .test2 { | |
| vertical-align: middle; | |
| display: inline-block; | |
| width: 100px; | |
| height: 100px; | |
| line-height: 1.5em; | |
| margin: 10px; | |
| padding: 20px; | |
| font-size: 14px; | |
| font-weight: normal; | |
| color: #fff; | |
| } | |
| .test1 { | |
| background-color: #3f51b5; | |
| } | |
| .test2 { | |
| background-color: #ee6f0b; | |
| } | |
| *+html .test1, | |
| *+html .test2 { | |
| margin-top: 50px; | |
| display: inline; | |
| zoom: 1; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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.2.714/styles/kendo.common.min.css"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css"> | |
| <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script> | |
| <script src="https://kendo.cdn.telerik.com/2016.2.714/js/jquery.min.js"></script> | |
| <script src="https://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script> | |
| <script src="https://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.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/1.2.0/config2.js"></script> | |
| <script> | |
| System.import('aurelia-bootstrapper'); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function configure(aurelia) { | |
| aurelia.use | |
| .standardConfiguration() | |
| .developmentLogging() | |
| .plugin('aurelia-kendoui-bridge'); | |
| aurelia.start().then(a => a.setRoot()); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment