Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Simple Drag Example
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { tracked } from '@glimmer/tracking';
export default class SimpleDrag extends Component {
@tracked statusText = "";
@tracked overDropZone = false;
@action dragHasStarted() {
this.statusText = "Drag has started";
}
@action dropItem(dragEvent) {
dragEvent.preventDefault();
this.statusText = "Drop Has Completed";
this.overDropZone = false;
}
@action dragOver(dragEvent) {
dragEvent.preventDefault();
dragEvent.dataTransfer.dropEffect = "move";
}
@action dropLeave() {
this.statusText = "Drag has left drop zone";
this.overDropZone = false;
}
@action dropEnter() {
this.statusText = "Drag is entered Drop Zone";
this.overDropZone = true;
}
@action dragEnd() {
this.statusText += "; Drag end";
}
}
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
}
.dropZone {
padding: 10px;
background-color: #CCC;
width: 200px;
text-align: center;
border: 1px solid #fff;
margin-bottom: 24px;
}
.dropZone-over {
border: 1px dashed #333;
background-color: rgb(193, 211, 159);
}
.dragMe {
width: 200px;
padding: 10px;
background-color: #333;
color: white;
text-align: center;
cursor:move;
}
<h2>Simple Drag Example</h2>
<p>This is just a simple one element to drag on top of another</p>
<SimpleDrag />
<div
{{on "drop" this.dropItem}}
{{on "dragover" this.dragOver}}
{{on "dragleave" this.dropLeave}}
{{on "dragenter" this.dropEnter}}
class="dropZone {{if this.overDropZone "dropZone-over"}}"
role="button"
>
Drop Zone 1
</div>
<div
{{on "dragstart" this.dragHasStarted}}
{{on "dragend" this.dragEnd}}
class="dragMe"
draggable="true"
role="button"
>
Drag Me
</div>
<p>Drag Status: "{{this.statusText}}"</p>
{
"version": "0.17.0",
"EmberENV": {
"FEATURES": {},
"_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
"_APPLICATION_TEMPLATE_WRAPPER": true,
"_JQUERY_INTEGRATION": true
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.17.0",
"ember-template-compiler": "3.17.0",
"ember-testing": "3.17.0"
},
"addons": {
"@glimmer/component": "1.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment