I am using typescript with vue and jquery ui.
I am getting error as "TypeError: item.$element.draggable is not a function".
What am I missing in this code. I have included jquery-ui also as can be seen from following files. I want to use jquery ui plugins into my code.
I googled many places but none of the solutions are working for me. I have also added typings for jquery and jquery ui.
My floatingmenu.ts file
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import $ from 'jquery';
import anime from 'animejs';
import 'jquery-ui';
@Component
export default class FloatingMenuComponent extends Vue {
mounted() {
var menu = new Menu("#myMenu");
var item1 = new Item("list","#FF5C5C");
var item2 = new Item("torso", "#FF5C5C");
var item3 = new Item("social-facebook", "#5CD1FF");
var item4 = new Item("paypal", "#FFF15C");
var item5 = new Item("link", "#64F592");
menu.add(item1);
menu.add(item2);
menu.add(item3);
menu.add(item4);
menu.add(item5);
$(document).delay(50).queue(function(next) {
menu.open();
next();
$(document).delay(1000).queue(function(next) {
menu.close();
next();
});
});
}
}
var timeOut: number;
class Menu {
$element: any;
size: number;
first:any = null;
last:any = null;
timeOut: null;
hasMoved: boolean;
status: string;
constructor(menu: string) {
this.$element = $(menu);
this.size = 0;
this.first = null;
this.last = null;
this.timeOut = null;
this.hasMoved = false;
this.status = "closed";
}
add(item: Item) {
var menu = this;
if (this.first == null) {
this.first = item;
this.last = item;
this.first.$element.on("mouseup", function() {
if (menu.first.isMoving) {
menu.first.isMoving = false;
} else {
menu.click();
}
});
item.$element.draggable(
{
start: function() {
menu.close();
item.isMoving = true;
}
},
{
drag: function() {
if (item.next) {
item.next.updatePosition();
}
}
},
{
stop: function() {
item.isMoving = false;
item.next.moveTo(item);
}
}
);
} else {
this.last.next = item;
item.prev = this.last;
this.last = item;
}
this.$element.after(item.$element);
}
open() {
this.status = "open";
var current = this.first.next;
var iterator = 1;
var head = this.first;
var sens = head.$element.css("left") < head.$element.css("right") ? 1 : -1;
while (current != null) {
anime({
targets: current.$element[0],
left: parseInt(head.$element.css("left"), 10) + (sens * (iterator * 50)),
top: head.$element.css("top"),
duration: 500
});
iterator++;
current = current.next;
}
}
close() {
this.status = "closed";
var current = this.first.next;
var head = this.first;
var iterator = 1;
while (current != null) {
anime({
targets: current.$element[0],
left: head.$element.css("left"),
top: head.$element.css("top"),
duration: 500
});
iterator++;
current = current.next;
}
}
click() {
if (this.status == "closed") {
this.open();
} else {
this.close();
}
}
}
class Item {
$element: any;
icon: any;
prev: any = null;
next:any = null;
isMoving: boolean;
constructor(icon: string, backgroundColor: string) {
this.$element = $(document.createElement("div"));
this.icon = icon;
this.$element.addClass("item");
this.$element.css("background-color", backgroundColor);
var i = document.createElement("i");
$(i).addClass("fi-" + icon);
this.$element.append(i);
this.prev = null;
this.next = null;
this.isMoving = false;
var element = this;
this.$element.on("mousemove", function() {
clearTimeout(timeOut);
timeOut = setTimeout(function() {
if (element.next && element.isMoving) {
element.next.moveTo(element);
}
}, 10);
});
}
moveTo(item: { $element: { css: { (arg0: string): void; (arg0: string): void; }; }; }) {
anime({
targets: this.$element[0],
left: item.$element.css("left"),
top: item.$element.css("top"),
duration: 700,
elasticity: 500
});
if (this.next) {
this.next.moveTo(item);
}
}
updatePosition() {
anime({
targets: this.$element[0],
left: this.prev.$element.css("left"),
top: this.prev.$element.css("top"),
duration: 200
});
if (this.next) {
this.next.updatePosition();
}
}
}
My floatingmenu.ts.html
<template>
<div class="center menu">
<div id="myMenu"></div>
</div>
</template>
<script src="./floatingmenu.ts"></script>
