Skip to content

Instantly share code, notes, and snippets.

@djodonnell
Last active December 9, 2020 14:01
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save djodonnell/6450a619de623bca3e7ce996609cd2cd to your computer and use it in GitHub Desktop.
Save djodonnell/6450a619de623bca3e7ce996609cd2cd to your computer and use it in GitHub Desktop.
Ember InteractJS
import Controller from '@ember/controller';
import { action } from '@ember/object';
import interact from 'interactjs';
export default class AnimationSimpleDivDrag extends Controller {
// initialise grid properties
dragCardPositionDelta = { dx: 0, dy: 0 };
isDraggingCard = false;
constructor(...args) {
super(...args);
this.draggableCards = interact('.draggable-card');
this.draggableCards.draggable({
origin: 'self',
inertia: false,
listeners: {
start: this.dragStart,
move: this.dragMove,
end: this.dragEnd
}
});
};
@action
dragStart(event) {
this.isDraggingCard = true;
// modify dom to support dragging the element
event.target.style.position = 'relative';
event.target.style.touchAction = 'none';
event.target.style.userSelect = 'none';
event.target.style.left = '0px';
event.target.style.top = '0px';
this.dragCardPositionDelta = { dx: 0, dy: 0 };
};
@action
dragMove(event) {
this.dragCardPositionDelta.dx += dx;
this.dragCardPositionDelta.dy += dy;
// debugger;
event.target.style.transform =
`translate(
${this.dragCardPositionDelta.dx}px,
${this.dragCardPositionDelta.dy}px
)`;
};
@action
dragEnd(event) {
console.log('dragEnd()');
};
}
<div
role="button"
class="draggable-card"
style="width:100px; height:100px; background:lightblue"
/>
{
"version": "0.17.1",
"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.5.1/jquery.js",
"ember": "3.18.1",
"ember-template-compiler": "3.18.1",
"ember-testing": "3.18.1",
"interactjs": "^1.10.1"
},
"addons": {
"@glimmer/component": "1.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment