HTML5 drag and drop for Check and Radio buttons

Question

I have a form where i have text field, checkbox, radio button. i have added some events for drag and drop(HTML5). It works fine for text input type but not working for radio and checkbox input type. do we have any restriction on that? code for checkbox:

    var mastercheck = document.getElementById("master_check");
        console.log(" check "+ mastercheck);
        mastercheck.addEventListener('dragstart', checkdragStart, false);
        mastercheck.addEventListener('dragend'  , dragEnd  , false);

function checkdragStart(event) {
        console.log("checkdrag");
            event.dataTransfer.setData('text/html', "checkbox");
        event.dataTransfer.effectAllowed="copy";
        } 
    function dragEnd(event) {
        }

Code for Text:

var mastertext = document.getElementById("master_name");

    mastertext.addEventListener('dragstart', textdragStart, false);
    mastertext.addEventListener('dragend'  , dragEnd  , false);

 function textdragStart(event) {
    console.log("textdrag");
        event.dataTransfer.setData('text/html', "text");
    event.dataTransfer.effectAllowed="copy";
}

HTML code:

[A] <input type="text" draggable="true" id="master_name" size="5" value=""></br>
[check] <input type="checkbox" draggable="true" id="master_check" value=""></br>

What am i doing wrong here?

Answer 1

I am unsure if i understand your question correctly, but i've implemented a list of draggable radio buttons, which might be of use:

 <ul>
 <label class="p-1 py-1" draggable="true">
     <b>7e7a2b0c-68bb-4b3f-9e9d-accc3d306b69</b><br>
     <input type="radio" name="job" class="mx-2">
 </label>
 <label class="p-1 py-1" draggable="true">
      <b>c50aa4a7-916e-4140-b41d-8bf0ca45695e</b><br>
      <input type="radio" name="job" class="mx-2">
 </label>
 </ul>

JS:

    let selected = null

    const areSiblings = (elm1, elm2) => 
        elm1 != elm2 && elm1.parentNode == elm2.parentNode;

    function dragOver(e) {
        if(areSiblings(selected, e.target.parentNode)){
            console.log("abort");
            return;
        }
        if (isBefore(selected, e.target)) {
            e.target.parentNode.insertBefore(selected, e.target)
        } else {
            e.target.parentNode.insertBefore(selected, e.target.nextSibling)
        }
    }

    function dragEnd() {
        selected = null;
    }

    function dragStart(e) {
        selected = e.target;
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text/plain', null);
        
    }

    function isBefore(el1, el2) {
        let cur
        if (el2.parentNode === el1.parentNode) {
            for (cur = el1.previousSibling; cur; cur = cur.previousSibling) {
                if (cur === el2) return true
            }
        }
        return false;
    }