☰

拖拽功能

为指定元素添加拖拽功能

// ==UserScript==
// @name         拖拽功能
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  为指定元素添加拖拽功能
// @author       OpenAI
// @match        https://tuxun.fun/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    function setInitialPositionFromStorage(element, selector) {
        const storedPos = localStorage.getItem(selector);
        if (storedPos) {
            const { left, top } = JSON.parse(storedPos);
            element.style.left = left;
            element.style.top = top;
        }
    }

    function makeDraggable(element, selector) {
        let isDragging = false;
        let startX, startY, initialX, initialY;

        if (!element) return;

        if (window.getComputedStyle(element).position === 'static') {
            element.style.position = 'relative';
        }

        // 从localStorage中获取并设置元素的初始位置
        setInitialPositionFromStorage(element, selector);

        element.addEventListener('mousedown', function(event) {
            isDragging = true;
            startX = event.clientX;
            startY = event.clientY;
            initialX = parseInt(element.style.left || 0);
            initialY = parseInt(element.style.top || 0);

            const map = window.map || document.querySelector('#map').__gm;
            if (map && map.setOptions) {
                map.setOptions({draggable: false});
            }

            event.stopPropagation();
            event.preventDefault();
        });

        document.addEventListener('mousemove', function(event) {
            if (!isDragging) return;
            let dx = event.clientX - startX;
            let dy = event.clientY - startY;
            element.style.left = (initialX + dx) + 'px';
            element.style.top = (initialY + dy) + 'px';

            event.stopPropagation();
            event.preventDefault();
        });

        document.addEventListener('mouseup', function(event) {
            if (isDragging) {
                const map = window.map || document.querySelector('#map').__gm;
                if (map && map.setOptions) {
                    map.setOptions({draggable: true});
                }

                // 保存元素的位置到localStorage
                localStorage.setItem(selector, JSON.stringify({
                    left: element.style.left,
                    top: element.style.top
                }));
            }
            isDragging = false;
            event.stopPropagation();
        });
    }

    document.addEventListener('dblclick', function(event) {
        if (event.target.closest('#tuxun')) {
            event.preventDefault();
            event.stopPropagation();
        }
    }, true);

    const selectors = [
        // ... 各种选择器 ...
         '#map > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-marker-pane > img:nth-child(10)',
        '#viewer > div > div:nth-child(14) > div.gmnoprint.gm-bundled-control.gm-bundled-control-on-bottom > div',
        '#map > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-marker-pane > img:nth-child(6)',
        '#map > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-marker-pane > img:nth-child(1)',
        '#map > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-marker-pane > img:nth-child(2)',
        '#map > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-marker-pane > img:nth-child(3)',
    '#map > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-marker-pane > img:nth-child(4)',
    '#map > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-marker-pane > img:nth-child(5)',
    '#map > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-marker-pane > img:nth-child(8)',
    '#map > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-marker-pane > img:nth-child(7)',
    '#map > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-marker-pane > img:nth-child(9)',
    '#map > div.leaflet-pane.leaflet-map-pane > div.leaflet-pane.leaflet-marker-pane > img:nth-child(7)'
    ];

    const observer = new MutationObserver(mutations => {
        for (const mutation of mutations) {
            if (mutation.addedNodes.length) {
                selectors.forEach(selector => {
                    const element = document.querySelector(selector);
                    if (element) {
                        makeDraggable(element, selector);
                    }
                });
            }
        }
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });

})();