So I'm trying to make a drag-and-drop menu, where after you fill out a draggable item, you can drag it over to a "drop area".
The issue I'm having is that due to issues where I can't change certain items after they've been dropped in the drop area, the fastest solution would be to make any "fields" and "buttons" non-interactable to the user when the item has been dropped.
In case it's relevant, this menu is contained in a HTML5 web page and the drag-and-drop menu is coded with JavaScript.
What options do I have to do this with JavaScript? I still want those "fields" and "buttons" to be interactable before they've been dragged.
Please let me know if you have any questions.
A possible solution is to add css to the html-elements that you want to de-activate. For example, css that has the display: none;
styling.
const elementThatYouAreInterestedIn = document.querySelector(".thElementYouAreInterestedInClass");
elementThatYouAreInterestedIn.classList.add("hide");
.hide {
display: none;
}
Another solution is to add the disabled attribute to a html-element. This works for input type elements. For example <input type="button" id="thElementYouAreInterestedInID"></input>
const button = document.querySelector('#thElementYouAreInterestedInID');
// Disabling a button
button.disabled = true;
// Enabling a button
button.disabled = false;
You can change the default behavior of an input-element. For example, assume that you have a text input <input type="text" class="thElementYouAreInterestedInID"></input>
.
let textInputIsDisabled = true; // we can control whether the user can/can't use the text-input element
const inputElement = document.querySelector("#thElementYouAreInterestedInID");
inputElement.addEventListener("change", (event) => {
const currentInputValue = event.target.value;
if(!textInputIsDisabled){
inputElement.value = currentInputValue;
}
});
I would combine solutions #1 and #3 to change the default behavior, as well as changing the default styling.
let textInputIsDisabled = true; // we can control whether the user can/can't use the text-input element
const inputElement = document.querySelector("#thElementYouAreInterestedInID");
inputElement.addEventListener("change", (event) => {
const currentInputValue = event.target.value;
if(!textInputIsDisabled){
inputElement.classList.remove("disabledStyle");
inputElement.classList.add("enabledStyle");
inputElement.value = currentInputValue;
} else {
inputElement.classList.remove("enabledStyle");
inputElement.classList.add("disabledStyle");
}
});
.enabledStyle {
...
}
.disabledStyle {
...
}