Communities

Writing
Writing
Codidact Meta
Codidact Meta
The Great Outdoors
The Great Outdoors
Photography & Video
Photography & Video
Scientific Speculation
Scientific Speculation
Cooking
Cooking
Electrical Engineering
Electrical Engineering
Judaism
Judaism
Languages & Linguistics
Languages & Linguistics
Software Development
Software Development
Mathematics
Mathematics
Christianity
Christianity
Code Golf
Code Golf
Music
Music
Physics
Physics
Linux Systems
Linux Systems
Power Users
Power Users
Tabletop RPGs
Tabletop RPGs
Community Proposals
Community Proposals
tag:snake search within a tag
answers:0 unanswered questions
user:xxxx search by author id
score:0.5 posts with 0.5+ score
"snake oil" exact phrase
votes:4 posts with 4+ votes
created:<1w created < 1 week ago
post_type:xxxx type of post
Search help
Notifications
Mark all as read See all your notifications »
Q&A

Welcome to the Power Users community on Codidact!

Power Users is a Q&A site for questions about the usage of computer software and hardware. We are still a small site and would like to grow, so please consider joining our community. We are looking forward to your questions and answers; they are the building blocks of a repository of knowledge we are building together.

Post History

71%
+3 −0
Q&A 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 f...

posted 1y ago by Zer0‭  ·  edited 1y ago by Zer0‭

Answer
#2: Post edited by user avatar Zer0‭ · 2023-12-03T17:17:04Z (about 1 year ago)
  • 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 language channels without reloading the page.
  • ```javascript
  • // ==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 });
  • })();
  • ```
  • 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.
  • ```javascript
  • // ==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 });
  • })();
  • ```
#1: Initial revision by user avatar Zer0‭ · 2023-12-03T17:15:19Z (about 1 year ago)
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 language channels without reloading the page.

```javascript
// ==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 });
})();
```