aico-image-editor/src/draggable.js

Combine multiple image into and create single combined image

export default () => ({
    init() {
        this.dragElement(this.$el);
    },
    deltaX: 0,
    deltaY: 0,
    mousePosX: 0,
    mousePosY: 0,
    mouseDownHandler: null,
    mouseMoveHandler: null,
    mouseUpHandler: null,
    dragElement(el) {
        this.mouseDownHandler = this.createMouseDownHandler(el);
        this.mouseMoveHandler = this.createMouseMoveHandler(el)
        this.mouseUpHandler = this.createMouseUpHandler(el)
        
    },
    createMouseDownHandler(el) {
        const self = this;
        return (e) => {
            e.preventDefault();
            self.mousePosX = e.clientX;
            self.mousePosY = e.clientY;

            document.addEventListener('mousemove', self.mouseMoveHandler);
            document.addEventListener('mouseup', self.mouseUpHandler);
            
        }
    },
    createMouseMoveHandler(el) {
        const self = this;
        return (e) => {
            e.preventDefault();

            self.deltaX = e.clientX - self.mousePosX;
            self.deltaY = e.clientY - self.mousePosY;

            self.mousePosX = e.clientX;
            self.mousePosY = e.clientY;


            // calculate positionX which should be minimum 0 but maximum upto the width of ancestor parent element
            const positionX = Math.min((Math.max((el.offsetLeft + self.deltaX), 0)),  el.offsetParent.clientWidth);
            const positionY = Math.min((Math.max((el.offsetTop + self.deltaY), 0)), el.offsetParent.clientHeight);

            const percentagePosX = ((positionX/el.offsetParent.clientWidth)*100).toFixed(2);

            // positionY only needed in case of vertical slider
            const percentagePosY = ((positionY/el.offsetParent.clientHeight)*100).toFixed(2);

            this.$dispatch('color-stop-position-updated', {stopId: el.id, positionX: percentagePosX, positionY: percentagePosY, color: el.dataset.color});
            
           
            

        }
    },
    createMouseUpHandler(el) {
        const self = this;
        return (e) => {
            document.removeEventListener('mousemove', self.mouseMoveHandler);
            document.removeEventListener('mouseup', self.mouseUpHandler);
        }
    }
})