javascript - tablas - Botón arrastrable en Firefox
propiedades button html (4)
De otros, llegué a saber que su problema se debe a un error que existe en Firefox. Le sugiero que implemente escuchas personalizadas para imitar el evento de arrastre. Mi solución es la siguiente:
var btn = document.getElementById(''btn'');
var btnPressed = false;
btn.addEventListener(''mousedown'', function(e) {
btnPressed = true;
px = e.clientX;
py = e.clientY;
});
btn.addEventListener(''mouseup'', function(e) {
btnPressed = false;
})
window.addEventListener(''mouseup'', function(e) {
btn.style.MozTransform = "";
btn.style.WebkitTransform = "";
btn.style.opacity = 1;
})
window.addEventListener(''mousemove'', function(e) {
if(btnPressed) {
dx = e.clientX - px;
dy = e.clientY - py;
btn.style.opacity = 0.85;
btn.style.MozTransform = "translate(" + dx + "px, " + dy + "px)";
btn.style.WebkitTransform = "translate(" + dx + "px, " + dy + "px)";
}
})
<button id="btn">Drag Me</button>
Sé que no es perfecto. La codificación es la única forma de resolver este problema hasta que Firefox arregle este error.
¿Es posible hacer que un <button>
( <input type="button">
) funcione con HTML5 arrastrar y soltar en Mozilla Firefox (mientras aún se puede hacer clic)?
El siguiente fragmento de código funciona en Google Chrome, pero el botón y el botón div con el botón no se pueden arrastrar Mozilla Firefox (a menos que se presione la tecla Alt , no hay idea sobre el móvil):
document.getElementById("myDiv").addEventListener(
"dragstart",
function (e) {
e.dataTransfer.setData("Text", "myDiv")
}
);
document.getElementById("myButton").addEventListener(
"dragstart",
function (e) {
e.dataTransfer.setData("Text", "myButton")
}
);
document.getElementById("myDivWithButton").addEventListener(
"dragstart",
function (e) {
e.dataTransfer.setData("Text", "myDivWithButton")
}
);
<div id="myDiv" draggable="true">Div</div>
<button id="myButton" draggable="true">Button</button>
<div id="myDivWithButton" draggable="true"><button>Div with Button</button></div>
draggable="true"
y dataTransfer.setData
, ¿hay algo que me perdí? ¿Hay alguna solución sensata?
(Si desea saber para qué necesito esto: tengo algo que puede ser arrastrado a una cierta posición o puesto en la posición predeterminada [centro de la vista actual], mi idea fue hacer ambas cosas a través del botón [d & d → elegir posición, haga clic en → posición predeterminada]. Sé que supongo que podría intentar formatear un <div>
para que se vea como un <button>
o simplemente dividir el control en dos elementos, pero preferiría no hacerlo.)
La solución es simple con jQuery UI :
$(function() {
$("div.Icon").draggable({ // in "div.icon" is you class
grid: [80, 80], // for my project I needed a grid
containment: "document" // will stay in your display
});
});
Puedes darle una pequeña repisa que se puede arrastrar al lado del botón.
.frontdrop:after {
content: '''';
top: 0;
left: 0;
right: 20;
bottom: 0;
border-width="1";
border-style: solid;
position: absolute;
}
Ya hay un error en Firefox donde no puedes arrastrar un botón. https://bugzilla.mozilla.org/show_bug.cgi?id=568313
Sin embargo, puedes arrastrar tu botón que contiene div (que no se puede arrastrar en este momento) usando pseudo clase ''after''. Ejemplo:
document.getElementById("myDivWithButton").addEventListener(
"dragstart",
function (e) {
e.dataTransfer.setData("Text", "myDivWithButton")
}
);
.frontdrop {
position: relative;
}
.frontdrop:after {
content: '''';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
}
<div id="myDivWithButton" class="frontdrop" draggable="true"><button>Div with Button</button></div>