firefox - reproducir - label html
¿Cómo hacer que<div> s en HTML5 se pueda arrastrar para Firefox? (1)
Según HTML5 Doctor , esto no funcionará en Firefox sin ayuda de JS.
La especificación HTML 5 dice que debería ser tan simple como agregar los siguientes atributos al marcado de los elementos en cuestión:
draggable="true"Sin embargo, esto no funciona completamente para Safari o Firefox. Para Safari, debe agregar el siguiente estilo al elemento:
[draggable=true] { -khtml-user-drag: element; }Esto comenzará a funcionar en Safari y, a medida que lo arrastre, establecerá un valor vacío predeterminado con el objeto dataTransfer. Sin embargo, Firefox no le permitirá arrastrar el elemento a menos que configure manualmente algunos datos para ir con él. Para resolver esto, necesitamos un controlador de eventos dragstart, y le proporcionaremos algunos datos para arrastrar con:
var dragItems = document.querySelectorAll(''[draggable=true]''); for (var i = 0; i < dragItems.length; i++) { addEvent(dragItems[i], ''dragstart'', function (event) { // store the ID of the element, and collect it on the drop later on event.dataTransfer.setData(''Text'', this.id); }); }
Estoy jugando con las funciones de HTML5, y quiero que los div (y contenedores similares como artículos, secciones, etc.) sean arrastrables. Considera el siguiente código:
<!DOCTYPE html>
<html>
<head>
<title>A Simple Draggable Object</title>
</head>
<body>
<h1>Test #1: A Simple Draggable Object</h1>
<div draggable="true">This text should be draggable.</div>
</body>
</html>
Probé en OS X los siguientes navegadores: en Chrome 7.0 y Safari 5.0.2 puedo arrastrar el texto con éxito, pero en Firefox 3.6 y 4.0b6 no puedo arrastrar el texto ni marcarlo (como si fuera texto habitual). ¿Es esto un error o una característica? ¿Cómo logro que Firefox me permita arrastrar estas etiquetas sin usar jQuery?