Estimados, Estoy tratando de crear una funcionalidad de arrastrar y soltar, donde moveré campos HTML como (campo de texto, casilla de verificación, área de texto, etc.)
¡el código funciona bien con todo tipo de campos de entrada, excepto las casillas de verificación y los botones de opción! ¡mueve esos dos campos a posiciones incorrectas!
¿puedes ayudar por favor?
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>Reemplazo esos dos campos con imágenes y funciona bien ahora, los trato como mover una imagen, no un campo.
Gracias por tu tiempo.
guarde el objetivo del elemento arrastrando en una variable (lo llamo inputField)
guarde el desplazamiento del elemento en el evento mousedown
y cambiar el cálculo por
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>