How can I disable channel drag and drop in Discord?

Since there seem to be no userscripts for this, I wrote one myself. It should work with all major userscript managers and browsers. The script prevents the dragstart event and thus drag and drop for the channel list. Additionally, there is a button to reactivate drag and drop if you want to rearrange the channels or drag users to different voice channels without reloading the page.

// ==UserScript==
// @name         Discord channel drag and drop disabler
// @version      1.0
// @description  Disables channel drag and drop in Discord web app
// @author       Zer0
// @match        https://discord.com/**
// @grant        none
// ==/UserScript==

(async () => {
    'use strict';
    
    function modifyChannelList(channelListElement) {
        let dragEnabled = false;

        // Add container element
        const container = document.createElement('div');
        container.style.paddingLeft = '8px';
        container.style.paddingBottom = '8px';
        channelListElement.appendChild(container);
        
        // Add toggle button with discord-like styling
        const toggleButton = document.createElement('button');
        toggleButton.style.color = '#FFF';
        toggleButton.style.backgroundColor = 'rgb(71, 82, 196)';
        toggleButton.style.borderRadius = '3px';
        toggleButton.style.padding = '2px 16px';
        toggleButton.style.width = '100%';
        function updateButton(enabled) {
            toggleButton.innerHTML = enabled ? 'Disabled Drag and Drop' : 'Enable Drag and Drop';
        }
        updateButton(dragEnabled);
        toggleButton.addEventListener('click', () => {
            dragEnabled = !dragEnabled;
            updateButton(dragEnabled);
        });
        container.appendChild(toggleButton);

        function addDragHandler(elements) {
            elements.forEach(e => {
                e.addEventListener('dragstart', ev => {
                    if (!dragEnabled) {
                        // Prevent channel drag and drop
                        ev.stopImmediatePropagation();
                        // Prevent link drag and drop (browser default)
                        ev.preventDefault();
                    }
                });
            });
        }
        // Add custom drag handler to all channel elements
        addDragHandler(channelListElement.querySelectorAll('li'));

        // Add custom drag handler to all future channel elements (when a new channel is created)
        const observer = new MutationObserver(m => addDragHandler(m.flatMap(e => [...e.addedNodes]).filter(e => e instanceof HTMLElement && e.tagName === 'LI')));
        observer.observe(channelListElement, { childList: true, subtree: true });

        return () => observer.disconnect();
    }


    let channels = document.getElementById('channels');
    let cleanup = null;

    if (channels) {
        cleanup = modifyChannelList(channels);
    }

    // Searches for the channel list element if the site changes
    const mainObserver = new MutationObserver(() => { 
        const newChannels = document.getElementById('channels');
        if (newChannels !== null && channels !== newChannels) {
            channels = newChannels;
            if (cleanup) {
                cleanup();
            }
            cleanup = modifyChannelList(channels);
        }
    });
    mainObserver.observe(document.body, { childList: true, subtree: true });
})();

posted 12 months ago

CC BY 4.0

12mo ago

Zer0‭

101 reputation 0 3 10 2