Drag & Drop issue using javascript-CodePudding

Dears, Am trying to build a drag and drop functionality, where I shall move HTML fields like (Text field, check box, textarea, etc.)

the code is working fine with all type of input fields except for Check boxes and Radio buttons! it moves those two fields to wrong positions!

can you help plz?

dragElement(document.getElementById("ChkBox"));
dragElement(document.getElementById("TxtFld"));
dragElement(document.getElementById("RadioButton"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  var MouseMoveCounterVar = 0;
  
  document.getElementById(elmnt.id).onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    MouseMoveCounterVar = 0;
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup compaired to the window:
    pos3 = e.clientX;
    pos4 = e.clientY;

    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;

    elmnt.style.top = (elmnt.offsetTop - pos2)   "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1)   "px";
    }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

.FieldDrag {
    position: absolute;
    z-index: 9;
    cursor: move;
}

<body style="margin: 0; background-color:silver">
<div id="ViewArea" style="width: 100%; height:100%;">
    <input id="TxtFld" type="text"  /><br/>
    <input id="ChkBox" type="checkbox" /><br/>
    <input id="RadioButton" type="radio" /><br/>
</div>
 </body>

CodePudding user response：

save the element target by the drag in a variable (i call it inputField)

save the offset of the element at mousedown event

and change the calculation by

    inputField.style.left = (e.clientX   offset[0])   'px';
    inputField.style.top  = (e.clientY   offset[1])   'px';

dragElement(document.getElementById("ChkBox"));
dragElement(document.getElementById("TxtFld"));
dragElement(document.getElementById("TxtFld2"));
dragElement(document.getElementById("RadioButton"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  var MouseMoveCounterVar = 0;
  var offset = [0,0];
  
  var inputField = document.getElementById(elmnt.id);
  inputField.onmousedown = dragMouseDown;

  function dragMouseDown(e) {
    MouseMoveCounterVar = 0;
    e = e || window.event;
    e.preventDefault();
    // get the mouse cursor position at startup compaired to the window:
   
    offset = [
      inputField.offsetLeft - e.clientX,
      inputField.offsetTop - e.clientY
    ];

    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
    // calculate the new cursor position:
        inputField.style.left = (e.clientX   offset[0])   'px';
        inputField.style.top  = (e.clientY   offset[1])   'px';
    }

  function closeDragElement() {
    // stop moving when mouse button is released:
    document.onmouseup = null;
    document.onmousemove = null;
  }
}

.FieldDrag {
    position: absolute;
    z-index: 9;
    cursor: move;
}

<body style="margin: 0; background-color:silver">
<div id="ViewArea" style="width: 100%; height:100%;position:relative; top:0; left:0;">
    <input id="TxtFld" type="text"  /><br/>
    <input id="ChkBox" type="checkbox" /><br/>
    <input id="RadioButton" type="radio" /><br/>
    <input id="TxtFld2" type="text"  /><br/>
</div>
 </body>

CodePudding user response：

I replace those two fields with images and its working fine now, I treat them like moving an image not field.

Thanks for your time.