PaperBag/www/plan/draggingClass.js

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);*/
    }
}