☰

Movable & Resizable Menu Script

A movable, resizable menu on a webpage.

当前为 2024-10-02 提交的版本，查看 最新版本。

// ==UserScript==
// @name         Movable & Resizable Menu Script
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  A movable, resizable menu on a webpage.
// @author       You
// @match        *://*/*
// @grant        none
// @license      MrSticker23
// ==/UserScript==

(function() {
    'use strict';

    // Create menu container
    const menu = document.createElement('div');
    menu.style.position = 'fixed';
    menu.style.top = '100px'; // Default start position
    menu.style.left = '100px'; // Default start position
    menu.style.width = '300px'; // Larger size
    menu.style.height = '200px'; // Larger size
    menu.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
    menu.style.color = 'white';
    menu.style.padding = '10px';
    menu.style.borderRadius = '10px';
    menu.style.zIndex = '1000';
    menu.style.cursor = 'move'; // Cursor for dragging

    // Add title
    const title = document.createElement('h3');
    title.textContent = 'Movable Menu';
    title.style.margin = '0 0 10px 0';
    menu.appendChild(title);

    // Add menu items (customize as needed)
    const item1 = document.createElement('button');
    item1.textContent = 'Action 1';
    item1.style.marginBottom = '5px';
    item1.style.width = '100%';
    item1.onclick = function() {
        alert('Action 1 triggered!');
    };
    menu.appendChild(item1);

    const item2 = document.createElement('button');
    item2.textContent = 'Action 2';
    item2.style.marginTop = '5px';
    item2.style.width = '100%';
    item2.onclick = function() {
        alert('Action 2 triggered!');
    };
    menu.appendChild(item2);

    // Make the menu draggable
    let isDragging = false;
    let offsetX, offsetY;

    menu.addEventListener('mousedown', function(e) {
        isDragging = true;
        offsetX = e.clientX - parseInt(menu.style.left);
        offsetY = e.clientY - parseInt(menu.style.top);
        menu.style.cursor = 'grabbing'; // Change cursor while dragging
    });

    document.addEventListener('mousemove', function(e) {
        if (isDragging) {
            menu.style.left = (e.clientX - offsetX) + 'px';
            menu.style.top = (e.clientY - offsetY) + 'px';
        }
    });

    document.addEventListener('mouseup', function() {
        isDragging = false;
        menu.style.cursor = 'move'; // Reset cursor when not dragging
    });

    // Append the menu to the body
    document.body.appendChild(menu);

})();