Can I make a drag-and-drop element's fields be unchangeable after being dropped?

Question

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.

Answer 1

Possible solution 1: Hide the element with CSS and JS

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.

JS

const elementThatYouAreInterestedIn = document.querySelector(".thElementYouAreInterestedInClass");
elementThatYouAreInterestedIn.classList.add("hide");

CSS

.hide {
    display: none;
}

Possible solution 2: Toggle the disabled attribute of input-elements

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>

JS

const button = document.querySelector('#thElementYouAreInterestedInID');
// Disabling a button
button.disabled = true;
// Enabling a button
button.disabled = false;

Possible Solution 3: Modify events

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>.

JS

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;
    }
});

Possible solution 4: Combine solutions #1 and #3

I would combine solutions #1 and #3 to change the default behavior, as well as changing the default styling.

JS

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");
    }

});

CSS

.enabledStyle {
    ...
}
.disabledStyle {
    ...
}