Ejemplo
Ejecutar un JavaScript cuando un <p> elemento está siendo arrastrado:
<p draggable="true" ondrag="myFunction(event)">Drag me!</p> Inténtalo tú mismo " Definición y Uso
El ondrag atributo se activa cuando se está arrastrando un elemento o selección de texto.
Arrastrar y soltar es una característica muy común en HTML5. Que es cuando se "agarra" un objeto y arrastrarlo a una ubicación diferente. Para obtener más información, consulte nuestro Tutorial HTML en HTML 5 de arrastrar y soltar .
Nota: Para que se pueda arrastrar un elemento, utilice el HTML5 mundial draggable atributo.
Tip: enlaces e imágenes se pueden arrastrar por defecto, y no es necesario el draggable atributo.
Hay muchos atributos de los eventos que se utilizan, y pueden ocurrir, en las diferentes etapas de una operación de arrastrar y soltar:
- Los sucesos activados en el objetivo arrastrable (el elemento de origen):
- ondragstart - se activa cuando el usuario empieza a arrastrar un elemento
- ondrag - se activa cuando se está arrastrando un elemento
- ondragend - se activa cuando el usuario ha terminado arrastrando el elemento
- Los sucesos activados en el destino de colocación:
- ondragenter - se activa cuando el elemento arrastrado entra el destino de colocación
- ondragover - se activa cuando el elemento arrastrado se encuentra sobre el destino de colocación
- ondragleave - se activa cuando el elemento arrastrado deja el destino de colocación
- ondrop - se activa cuando el elemento arrastrado se coloca sobre el destino de colocación
Nota: Al arrastrar un elemento, el evento ondrag dispara cada 350 milisegundos.
Soporte para el navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el event de atributos.
| Atributo evento | |||||
|---|---|---|---|---|---|
| ondrag | 4.0 | 9.0 | 3.5 | 6.0 | 12.0 |
Diferencias entre HTML 4.01 y HTML5
El ondrag atributo es nuevo en HTML5.
Sintaxis
<elementondrag=" script ">
Los valores de atributo
| Valor | Descripción |
|---|---|
| script | La secuencia de comandos para ejecutar en ondrag |
Detalles técnicos
| etiquetas HTML compatibles: | Los elementos HTML |
|---|
Páginas relacionadas
HTML Tutorial: Drag and Drop HTML5
Referencia HTML: HTML Atributo arrastrable
HTML DOM Referencia: ondrag Evento