Class Drag-and-Drop Floatable Elements

Tính năng kéo thả này cho phép người dùng tự do di chuyển các phần tử HTML trên toàn bộ trang web, giúp cá nhân hóa và điều chỉnh vị trí các phần tử theo mong muốn. Các Floatable Widget dạng bong bóng được thiết kế đặc biệt để hỗ trợ việc kéo thả, cho phép người dùng dễ dàng di chuyển chúng mà không bị giới hạn bởi khu vực cụ thể nào trên trang.

Trong module PolyWidgets cho Perfex CRM và WordPress tính năng kéo thả này được tích hợp vào Floatable Widget. Người dùng có thể di chuyển và định vị các phần tử này một cách độc lập trên bất kỳ vị trí nào của trang web. Tính năng này cho phép tương tác trực quan và linh hoạt, giúp người dùng dễ dàng định vị các phần tử này một cách tự do, theo nhu cầu của từng trang web mà không gây ảnh hưởng đến cấu trúc tổng thể.

Ví dụ: các icon contact, chát, call, coupon,… đôi khi khách muốn đổi vị trí trên trang hoặc tắt chúng đi luôn thì widget này sẽ hữu ích.

Với tính năng kéo thả, người dùng có toàn quyền kiểm soát vị trí của các phần tử trên trang, mang lại trải nghiệm tương tác động và linh hoạt, cho phép các widget thích ứng với bất kỳ bố cục nào của trang web.

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()); // Mảng từ '1' đến '10'

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

// Random vị trí x và y
        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`;

// Thêm id và class theo index
        element.classList.add(`element-${index}`);
        element.id = `element-${index}`;

container.appendChild(element);

// Áp dụng drag cho phần tử vừa tạo
        PolyDrag.dragElement(element);
    });
}

elementsTest();

Preview: Class Drag-and-Drop Floatable Elements

<body>

@polyxgo

PolyXGO

HTML

CSS

JavaScript

Preview: Class Drag-and-Drop Floatable Elements

Về WikiPoly

Liên hệ

HTML

CSS

JavaScript

Preview: Class Drag-and-Drop Floatable Elements

Đăng nhập