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