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
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...
Answer
#2: Post edited
- 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
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 }); })(); ```