CODEWITHSUNDEEP
javascripthtml
Jalaq
Jalaq

Reputation: 51

Drag & Drop issue using javascript

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" class="FieldDrag" /><br/>
    <input id="ChkBox" type="checkbox" class="FieldDrag"/><br/>
    <input id="RadioButton" type="radio" class="FieldDrag"/><br/>
</div>
 </body>

Upvotes: 5

Views: 287

Answers (2)

jeremy-denis
jeremy-denis

Reputation: 6878

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" class="FieldDrag" /><br/>
    <input id="ChkBox" type="checkbox" class="FieldDrag"/><br/>
    <input id="RadioButton" type="radio" class="FieldDrag"/><br/>
    <input id="TxtFld2" type="text" class="FieldDrag" /><br/>
</div>
 </body>

Upvotes: 2

Jalaq
Jalaq

Reputation: 51

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.

Upvotes: 0

Related Questions