Introducción

Instalación

Preguntas frecuentes (faq)

Sintaxis, palabras clave y funciones integradas

Distribución estándar

Implementación del import

Interfaz del navegador

Introducción - DOM API
Creando un documento
Accediendo a los elementos
Atributos, propriedades y métodos

Eventos
Eventos del ratón
Eventos del teclado
Eventos de foco
Eventos de arrastre

Query string

Usando objetos y librerías Javascript

Módulos específicos de Brython

El módulo integrado `browser`
browser.aio
browser.ajax
browser.html
browser.local_storage
browser.markdown
browser.object_storage
browser.session_storage
browser.svg
browser.template
browser.timer
browser.webcomponent
browser.websocket
browser.worker

javascript

Trabajando con Brython

Opciones de la función brython()
Testing y depuración
Desplegando una aplicación

Cookbook

Hola Mundo !
Insertar contenido en un elemento
Marcado HTML (bold,italic...)
Tabla HTML
Añadir (*bind*) y eliminar (*unbind*) eventos
Handle options in a SELECT
Arrastrar y soltar
Obtener el contenido de un elemento
Leer el contenido de un fichero
Almacenar objetos localmente
Ejemplo de onmouseover
 

Eventos de arrastre (Drag)

Los eventos de arrastre son

drag un elemento o una selección de texto se está arrastrando
dragenduna operación de arrastre se termina (liberando el botón del ratón o pulsando la tecla de escape)
dragenterun elemento arrastrado o una selección de texto entra dentro de un objetivo válido donde soltar (drop)
dragleaveun elemento o selección de texto arrastrado abandona un objetivo válido donde soltar (drop)
dragoveraun elemento o selección de texto está siendo arrastrado sobre un objetivo válido donde soltar (drop)
dragstartel usuario inicia el arrastre de un elemento o una selección de texto
dropun elemento se suelta en un un objetivo válido donde soltar (drop)

Atributo del objeto DOMEvent

dataTransfer
un "data store" usado para almacenar información durante el proceso de arrastrar y soltar (drag and drop)

Atributos y métodos del data store

El "data store" posee los siguientes atributos y métodos :

dropEffect

una cadena que representa el efecto que se usará, y deberá ser siempre uno de los valores posibles de effectAllowed.

para los eventos dragenter y dragover, el dropEffect se inicializará basándose en la acción que esté solicitando el usuario. Como se determine esto depende de la plataforma, pero el usuario, normalmente, puede pulsar teclas de modificación que ajusten la acción que se desea. Dentro del manejador de un evento para los eventos dragenter y dragover, el dropEffect debería ser modificado si la acción solicitada por el usuario no es la deseada.

Para los eventos dragstart, drag, y dragleave, el dropEffect se inicializa como "none". Cualquier valor asignado al dropEffect no será usado para nada.

Para los eventos drop y dragend, el dropEffect será inicializado a la acción deseada, que será el valor que el dropEffect tendrá después del último evento dragenter o dragover.

Valores posibles:

- "copy" : se hará una copia del item fuente en la nueva localización. - "move" : un item se moverá a la nueva localización. - "link" : se establece un enlace a la fuente en la nueva localización. - "none" : el item no podrá soltarse.

Asignar cualquier otro valor no tendrá efecto y permanecerá el valor antiguo.

effectAllowed

Una cadena que especifica los efectos permitidos para este arrastre. Puedes establecer esto en el evento dragstart para seleccionar el efecto deseado para la fuente, y dentro de los eventos dragenter y dragover para seleccionar los efectos deseados para el objetivo. El valor no se usa para otros eventos.

Valores posibles:

- "copy" : se hará una copia del item fuente en la nueva localización. - "move" : un item se moverá a la nueva localización. - "link" : se establece un enlace a la fuente en la nueva localización. - "copyLink" : se permite una operación de copia o enlace. - "copyMove" : se permite una operación de copia o movimiento. - "linkMove" : se permite una operación de movimiento o enlace. - "all" : se permten todas las operaciones. - "none" : el item no se podrá soltar. - "uninitialized" : el valor defecto cuando no se ha establecido el efecto, equivalente a "all".

Asignar cualquier otro valor no tendrá efecto y permanecerá el valor antiguo.

ficheros

Contiene una lista de todos los ficheros locales disponibles en la transferencia de datos. Si la operación de arrastre no implica arrastrar ficheros, esta propiedad será una lista vacia. Un índice de acceso inválido a la lista de ficheros especificados por esta propiedad devolverá None.

getData(type)

Recupera los datos para un tipo dado o una cadena vacia si los datos para ese tipo no existen o la tranferencia de datos no contiene información

setData(type, value)

Establece los datos para un tipo dado. Si los datos para el tipo no existen se añadirán al final, de manera que el último item de la lista de tipos será del nuevo formato. Si los datos para el tipo ya existen serán reemplazados en la misma posición. Esto es, el orden de la lista de tipos no se cambia cuando se reemplazan datos del mismo tipo.

tipos

Almacena una lista de los tipos de formato de los datos que se encuentran almacenados para el primer item, en el miso orden en que los datos fueron añadidos. Si no se añadieron datos se obtendrá una lista vacía.

Ejemplo

Ver la receta 'drag and drop' en el menú del recetario ('cookbook')