Class Drag-and-Drop Floatable Elements

This drag-and-drop feature allows users to freely move HTML elements across the entire webpage, enabling personalization and adjustment of element positions as desired. The Floatable Widgets, designed in a bubble style, are specifically built to support dragging, allowing users to easily move them without being restricted to any specific area on the page.

In the PolyWidgets module for Perfex CRM and WordPress, this drag-and-drop feature is integrated into Floatable Widgets. Users can independently move and position these elements anywhere on the webpage. This feature offers intuitive and flexible interaction, making it easy for users to freely position elements according to the needs of each website without affecting the overall structure.

For example, icons for contact, chat, call, coupons, etc., can be repositioned or even turned off by the user, making this widget useful.

With drag-and-drop functionality, users have full control over element positioning on the page, offering dynamic and flexible interaction, allowing widgets to adapt to any webpage layout.

HTML

CSS

JavaScript

class PolyDrag {
    static draggingElement = null;

static isTouchDevice() {
        return ('ontouchstart' in window || navigator.maxTouchPoints > 0);
    }

static dragElement(elementSelector, handleSelector = null) {
        const element = this.getElement(elementSelector);

if (!element) {
            console.error('Element not found');
            return;
        }

const handleElement = handleSelector ? this.getElement(handleSelector) : element;

if (!handleElement) {
            console.error('Handle element not found');
            return;
        }

if (PolyDrag.isTouchDevice()) {
            handleElement.ontouchstart = (e) => this.dragTouchStart(e, element);
        } else {
            handleElement.onmousedown = (e) => this.dragMouseDown(e, element);
        }
    }

static dragMouseDown(e, element) {
        e.preventDefault();
        let pos3 = e.clientX;
        let pos4 = e.clientY;

document.onmousemove = (e) => {
            let pos1 = pos3 - e.clientX;
            let pos2 = pos4 - e.clientY;
            pos3 = e.clientX;
            pos4 = e.clientY;
            element.style.top = (element.offsetTop - pos2) + "px";
            element.style.left = (element.offsetLeft - pos1) + "px";

this.logPosition(element);
        };

document.onmouseup = () => this.closeDragElement();
        this.draggingElement = element;
    }

static dragTouchStart(e, element) {
        e.preventDefault();
        const touch = e.touches[0];
        let pos3 = touch.clientX;
        let pos4 = touch.clientY;

document.ontouchmove = (e) => {
            const touchMove = e.touches[0];
            let pos1 = pos3 - touchMove.clientX;
            let pos2 = pos4 - touchMove.clientY;
            pos3 = touchMove.clientX;
            pos4 = touchMove.clientY;
            element.style.top = (element.offsetTop - pos2) + "px";
            element.style.left = (element.offsetLeft - pos1) + "px";

this.logPosition(element);
        };

document.ontouchend = () => this.closeDragElement();
        this.draggingElement = element;
    }

static logPosition(element) {
        let xPos = element.style.left;
        let yPos = element.style.top;
        const logsContainer = document.querySelector('.polydev-logs');

let tagName = element.tagName;
        let classList = element.className ? `.${element.className.split(' ').join('.')}` : '';
        let id = element.id ? `#${element.id}` : '';

logsContainer.innerHTML = `Element: ${tagName}${id}${classList} | X: ${xPos} | Y: ${yPos}`;
    }

static closeDragElement() {
        document.onmouseup = null;
        document.onmousemove = null;
        document.ontouchend = null;
        document.ontouchmove = null;
        PolyDrag.draggingElement = null;
    }

static getElement(selector) {
        if (typeof selector === 'string') {
            if (selector.startsWith('#')) {
                return document.getElementById(selector.substring(1));
            } else if (selector.startsWith('.')) {
                return document.querySelector(selector);
            }
        } else if (window.jQuery && selector instanceof jQuery) {
            return selector[0];
        } else if (selector instanceof HTMLElement) {
            return selector;
        }
        return null;
    }
}

function elementsTest() {
    const container = document.querySelector('.polydev-container');
    const arr_text = Array.from({
        length: 1000
    }, (_, i) => (i + 1).toString()); // Array from '1' to '10'

arr_text.forEach((text, index) => {
        const element = document.createElement('div');
        element.innerText = `#PolyDev ${text}`;
        element.classList.add('poly-element');
        element.style.position = 'absolute';

// Randomize x and y position
        const randomX = Math.floor(Math.random() * (600 - 10 + 1)) + 10;
        const randomY = Math.floor(Math.random() * (300 - 10 + 1)) + 10;
        element.style.left = `${randomX}px`;
        element.style.top = `${randomY}px`;

// Add id and class based on index
        element.classList.add(`element-${index}`);
        element.id = `element-${index}`;

container.appendChild(element);

// Apply drag to the newly created element
        PolyDrag.dragElement(element);
    });
}

elementsTest();

Preview: Class Drag-and-Drop Floatable Elements

<body>

@polyxgo

PolyXGO

HTML

CSS

JavaScript

Preview: Class Drag-and-Drop Floatable Elements

About WikiPoly

Contact

HTML

CSS

JavaScript

Preview: Class Drag-and-Drop Floatable Elements

Login