Tools+

Add a draggable handle to #tools on PixelPlace
Wrap lines
// ==UserScript==
// @name         Tools+
// @namespace    http://tampermonkey.net/
// @version      2024/11/17
// @description  Add a draggable handle to #tools on PixelPlace
// @author       Realwdpcker on Pixelplace
// @match        pixelplace.io/*
// @icon         https://i.imgur.com/2hE2enW.png
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const makeDraggable = (element, handle) => {
        let offsetX = 0, offsetY = 0, isDragging = false;

        const mouseDownHandler = (e) => {
            isDragging = true;
            offsetX = e.clientX - element.getBoundingClientRect().left;
            offsetY = e.clientY - element.getBoundingClientRect().top;
            document.addEventListener('mousemove', mouseMoveHandler);
            document.addEventListener('mouseup', mouseUpHandler);
        };

        const mouseMoveHandler = (e) => {
            if (!isDragging) return;
            element.style.position = 'absolute';
            element.style.left = `${e.clientX - offsetX}px`;
            element.style.top = `${e.clientY - offsetY}px`;
            handle.style.cursor = 'grabbing';
        };

        const mouseUpHandler = () => {
            isDragging = false;
            handle.style.cursor = 'grab';
            document.removeEventListener('mousemove', mouseMoveHandler);
            document.removeEventListener('mouseup', mouseUpHandler);
        };

        handle.style.cursor = 'grab';
        handle.addEventListener('mousedown', mouseDownHandler);
    };

    const waitForElement = (selector, callback) => {
        const interval = setInterval(() => {
            const element = document.querySelector(selector);
            if (element) {
                clearInterval(interval);
                callback(element);
            }
        }, 100);
    };

    waitForElement('#tools', (tools) => {
        // Create the draggable handle
        const handle = document.createElement('div');
        handle.style.position = 'absolute';
        handle.style.top = '5px';
        handle.style.right = '-15px';
        handle.style.width = '20px';
        handle.style.height = '20px';
        handle.style.padding = '12px';
        handle.style.background = '#828282';
        handle.style.border = '2px solid #fff';
        handle.style.borderRadius = '15px';
        handle.style.cursor = 'grab';
        handle.style.display = 'flex';
        handle.style.alignItems = 'center';
        handle.style.justifyContent = 'center';
        handle.style.zIndex = '1000';
        handle.style.boxShadow = '0px 0px 5px 0px rgba(0, 0, 0, 0.75)'; // Box shadow added here
        handle.title = 'Drag Me!';

        // Create the image
        const img = document.createElement('img');
        img.src = 'https://i.imgur.com/DDjMbDW.png'; // Replace with your image URL
        img.alt = 'Drag Icon';
        img.style.width = '18px'; // Adjust as needed
        img.style.height = '18px'; // Adjust as needed
        img.style.pointerEvents = 'none'; // Ensures the image doesn't block drag events

        // Append the image to the handle
        handle.appendChild(img);

        // Add handle to #tools
        tools.style.position = 'absolute';
        tools.appendChild(handle);

        // Make draggable using the handle
        makeDraggable(tools, handle);
    });
})();
欢迎访问Greasy Fork镜像
