Closed Jamlearner closed 6 years ago
I have also tried the module approach:
With ONLY "draggabilly": "^2.2.0
" and "jquery": "^3.3.1
" installed. Removing the typing files from npm install --save @types/draggabilly
<!-- CSS-->
.container {
padding: 10px;
border: 2px solid #F90;
height: 200px;
}
.draggable {
width: 140px;
height: 140px;
background: #F90;
border-radius: 10px;
margin: 0 10px 10px 0;
float: left;
}
.draggable.is-pointer-down {
background: #09F;
z-index: 2; /* above other draggies */
}
.draggable.is-dragging { opacity: 0.7; }
<!-- Markup -->
<div class="draggable"></div>
<div class="draggable"></div>
<div class="draggable"></div>
In my angular component:
var Draggabilly = require('draggabilly');
ngAfterContentInit() {
var draggie = new Draggabilly( '.draggable', {
// options
});
}
No compiler errors for this approach but my boxes wont drag.
See possibly solution in #178
Found the solution.
Import like this,
import * as Draggabilly from 'draggabilly/draggabilly';
First, I installed
npm install draggabilly
andnpm install --save @types/draggabilly
Then in my modules.ts of my angular app:
In my component, this is how i try to attach draggabilly to the container
Code seems to have no linting errors but I am unable to compile.
How can i use draggabilly in my Angular4 application?