150 lines
5.1 KiB
JavaScript
150 lines
5.1 KiB
JavaScript
|
|
class Draggable {
|
|
constructor(draggableClass, holderClass, hoverClassName, parentIdentifier, doneMovingFunc) {
|
|
this.parentIdentifier = parentIdentifier+" " || '';
|
|
this.moveableClass = draggableClass || "moveable";
|
|
this.holderClass = holderClass || "holder";
|
|
this.hoverClass = hoverClassName || "elementHover";
|
|
this.activeDragging = false;
|
|
this.draggingElem = null;
|
|
|
|
this.doneMoving = doneMovingFunc || function(draggedElement, afterPosElement){ console.log("No custom done-moving-function.", draggedElement, afterPosElement); };
|
|
|
|
this.update();
|
|
|
|
this.paused = false;
|
|
}
|
|
|
|
pause(){
|
|
// $(this.parentIdentifier+"."+this.moveableClass+":not(:eq(0))").off();
|
|
this.paused = true;
|
|
}
|
|
unpause(){
|
|
// this.update();
|
|
this.paused = false;
|
|
}
|
|
|
|
update(){
|
|
let hammerOptions = {};
|
|
let elemHolderHtml = "<div class='elemHolder' style='position: absolute;'></div>";
|
|
|
|
$(this.parentIdentifier+"."+this.moveableClass+":not(:eq(0))").off().hammer(hammerOptions).bind('panstart panend panmove', (ev, extra) => {
|
|
if(ev.type === "panmove" && this.activeDragging) {
|
|
if(typeof extra !== "undefined"){
|
|
ev.gesture = {center: { x: extra[0], y: extra[1] } };
|
|
}
|
|
this.moveDraggingElem(ev);
|
|
}
|
|
else if(ev.type === "panstart" && (!this.paused || typeof extra !== "undefined")) {
|
|
// console.log("start", ev);
|
|
this.activeDragging = true;
|
|
this.draggingElem = $(ev.currentTarget);
|
|
|
|
let holderElem = $(".elemHolder");
|
|
|
|
if(holderElem.length < 1){
|
|
$("body").append(elemHolderHtml);
|
|
}
|
|
this.draggingElem.clone().appendTo(".elemHolder");
|
|
this.draggingElem.css('opacity', '30%');
|
|
|
|
holderElem.css('height', '').css('height', (holderElem.height()+10)+"px");
|
|
}
|
|
else if(ev.type === "panend" && this.activeDragging){
|
|
// console.log("end", ev);
|
|
|
|
this.activeDragging = false;
|
|
this.draggingElem.css('opacity', '');
|
|
$(document).off('mousemove');
|
|
$(".elemHolder").html('');
|
|
|
|
let moveAfterElem = $("."+this.hoverClass);
|
|
if(moveAfterElem.length === 1){
|
|
if(!this.draggingElem.hasClass(this.hoverClass)){
|
|
this.doneMoving(this.draggingElem, moveAfterElem);
|
|
|
|
this.draggingElem.detach().insertAfter("."+this.hoverClass);
|
|
}
|
|
}
|
|
|
|
this.draggingElem = null;
|
|
$('.'+this.hoverClass).removeClass(this.hoverClass);
|
|
}
|
|
});
|
|
}
|
|
|
|
moveDraggingElem(event){
|
|
// console.log(event);
|
|
let elem = $('.elemHolder');
|
|
|
|
let x = event.gesture.center.x;
|
|
let y = event.gesture.center.y;
|
|
|
|
elem.css({ left: ((window.scrollX + x) - elem.width() / 4), top: ((window.scrollY + y)+4) });
|
|
|
|
|
|
$('.'+this.hoverClass).removeClass(this.hoverClass);
|
|
|
|
// let elemAtPos = $(document.elementFromPoint(x, y));
|
|
let elemAtPos = this.findClosestPos(x, y);
|
|
if(elemAtPos !== null){
|
|
elemAtPos.addClass(this.hoverClass);
|
|
}
|
|
}
|
|
|
|
findClosestPos(posX, posY){
|
|
let elemAtPos = $(document.elementFromPoint(posX, posY));
|
|
// let posClass = "posBelow";
|
|
|
|
let closest = elemAtPos.closest("."+this.moveableClass);
|
|
if(closest.length === 1){
|
|
return closest.first();
|
|
}
|
|
|
|
if(elemAtPos.hasClass(this.holderClass)){
|
|
if(posY < (elemAtPos.offset().top + elemAtPos.height()/2)){
|
|
return elemAtPos.find("."+this.moveableClass).first();
|
|
}
|
|
return elemAtPos.find("."+this.moveableClass).last();
|
|
}
|
|
|
|
return null;
|
|
}
|
|
|
|
moveToBottomAnimated(identifier){
|
|
let obj = $(identifier);
|
|
let posX = (obj.offset().left+(obj.width()/3))+10;
|
|
|
|
let startY = obj.offset().top;
|
|
let parentObj = obj.parent();
|
|
let endY = parentObj.offset().top+parentObj.height()-5;
|
|
|
|
let posY = startY+10;
|
|
|
|
obj.trigger('panstart', [true]);
|
|
obj.trigger('panmove', [[posX, startY-window.scrollY]]);
|
|
$(".elemHolder").animate({ top: endY+4 }, 200, ()=>{
|
|
obj.trigger('panmove', [[posX, endY-window.scrollY]]);
|
|
obj.trigger('panend', [true]);
|
|
});
|
|
|
|
let baseStep = 5;
|
|
let steps = (endY-startY)/baseStep;
|
|
|
|
let intervalCount = 0;
|
|
|
|
/*let moveInterval = setInterval(()=>{
|
|
intervalCount++;
|
|
// posY += 5+(intervalCount/10);
|
|
posY += baseStep-(Math.abs((intervalCount-(steps/2)))/baseStep);
|
|
console.log((Math.abs((intervalCount-(steps/2)))/baseStep));
|
|
posY += baseStep;
|
|
obj.trigger('panmove', [[posX, posY-window.scrollY]]);
|
|
if(posY >= endY){
|
|
// obj.trigger('panend');
|
|
clearInterval(moveInterval);
|
|
}
|
|
},5);*/
|
|
}
|
|
}
|