una tablas tabla propiedades obtener ejemplos datos con agregar javascript html drag-and-drop cross-browser draggable

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>