Skip to content

Instantly share code, notes, and snippets.

@Gaurav0
Forked from djodonnell/controllers.application\.js
Last active March 19, 2021 02:59
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 Gaurav0/b9adfc02c351f881b05c7032d18812e7 to your computer and use it in GitHub Desktop.
Save Gaurav0/b9adfc02c351f881b05c7032d18812e7 to your computer and use it in GitHub Desktop.
Ember InteractJS
import Controller from '@ember/controller';
import { action } from '@ember/object';
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({
inertia: false,
listeners: {
start: this.dragStart.bind(this),
move: this.dragMove.bind(this),
end: this.dragEnd.bind(this)
}
});
};
@action
dragStart(event) {
this.isDraggingCard = true;
this.dragCardPositionDelta = { dx: 0, dy: 0 };
};
@action
dragMove(event) {
var target = event.target
// keep the dragged position in the data-x/data-y attributes
var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
this.dragCardPositionDelta = { dx: x, dy: y };
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)'
// update the posiion attributes
target.setAttribute('data-x', x)
target.setAttribute('data-y', y)
};
@action
dragEnd(event) {
};
}
<div
role="button"
class="draggable-card"
style="width:100px; height:100px; background:lightblue; touch-action: none"
/>
{
"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": "https://cdn.jsdelivr.net/npm/interactjs@1.10.1/dist/interact.min.js"
},
"addons": {
"@glimmer/component": "1.0.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment