Creación de una interfaz HTML5 sencilla de “arrastrar y soltar”. Arrastrar y soltar: una forma de operar elementos de la interfaz de usuario 13 tecnología de arrastrar y soltar

182

En este ejemplo, seleccionamos un elemento div y lo hacemos móvil llamando al método draggable() en él. Como se muestra en la siguiente figura, en el documento abierto el elemento toma su posición habitual, pero luego se puede mover con el puntero del mouse a cualquier lugar en la ventana del navegador:

La capacidad de arrastrar y soltar elementos es útil por sí sola, pero es aún más útil cuando se usa junto con la interacción Droppable, que se describe a continuación.

La interacción que se puede arrastrar se logra únicamente mediante el uso de marcado HTML y estilos CSS específicos. Esto significa que esta funcionalidad funcionará en casi cualquier navegador, pero los elementos dotados de ella no podrán funcionar con herramientas nativas similares de arrastrar y soltar. sistemas operativos.

Las operaciones de arrastrar y soltar definidas por la especificación HTML5 generalmente se implementan mediante mecanismos nativos del sistema operativo. Si está utilizando el mecanismo de arrastrar y soltar de jQuery UI, entonces es mejor deshabilitar las funciones HTML5 equivalentes para evitar conflictos. Para hacer esto, establezca el atributo arrastrable del elemento del cuerpo del documento en falso.

Configurar la interacción arrastrable

Hay muchas opciones de personalización para las interacciones que se pueden arrastrar. Las propiedades más importantes, que se analizan en las siguientes secciones, se muestran en la siguiente tabla:

Propiedades de interacción arrastrables descripción de propiedad

eje	Limita la capacidad de moverse en determinadas direcciones. El valor predeterminado es falso, lo que significa que no hay restricción, pero también puede especificar un valor de "x" (moverse solo a lo largo del eje X) o "y" (moverse solo a lo largo del eje Y)
contención	Limita la ubicación del elemento que se mueve a un área específica de la pantalla. Los tipos de valores admitidos se describen en la siguiente tabla, utilizando el ejemplo correspondiente. El valor predeterminado es falso, lo que significa que no hay restricciones.
demora	Especifica cuánto tiempo se debe arrastrar un elemento antes de moverse. El valor predeterminado es 0, lo que significa que no hay demora.
distancia	Define la distancia que el usuario debe arrastrar un elemento desde su posición inicial antes de que realmente se mueva. El valor predeterminado es 1 píxel
red	Fuerza el ajuste del elemento movido a las celdas de la cuadrícula. El valor predeterminado es falso, lo que significa que no hay vinculación.

Limitar las direcciones de movimiento

Hay varias formas de restringir el movimiento de un elemento en determinadas direcciones. La primera es utilizar la opción de eje, que le permite restringir la dirección del movimiento al eje X o Y. A continuación se muestra un ejemplo de esto:

... div.dragElement (tamaño de fuente: grande; borde: negro sólido delgado; relleno: 16px; ancho: 8em; alineación de texto: centro; color de fondo: gris claro; margen: 4px) $(función() ( $ ("dragElement").draggable(( eje: "x")).filter("#dragV").draggable("opción", "eje", "y"); )); Arrastrar verticalmente Arrastrar horizontalmente Ejecutar ejemplo

En este ejemplo, definimos dos elementos div, los seleccionamos usando jQuery y llamamos al método arrastrable(). Como argumento para este método, pasamos un objeto que inicialmente restringe el movimiento de ambos elementos div a la dirección a lo largo del eje X. Luego, usando el método jQuery filter(), podemos seleccionar el elemento dragV sin que jQuery busque el todo el documento nuevamente y configúrelo en una dirección de movimiento permitida diferente, a lo largo del eje Y. Por lo tanto, obtenemos un documento en el que un elemento div solo se puede arrastrar en dirección vertical y el otro, solo en dirección horizontal. El resultado se muestra en la figura:

Limitar el área permitida de movimiento del elemento.

También puedes limitar el área de la pantalla donde puedes arrastrar un elemento. Para hacer esto, use la opción de contención. Los formatos de valores que se pueden especificar en esta opción se describen en la siguiente tabla:

A continuación se ofrece un ejemplo del uso de la opción de contención:

... div.dragElement (tamaño de fuente: grande; borde: negro sólido delgado; relleno: 16 px; ancho: 8 em; alineación de texto: centro; color de fondo: gris claro; margen: 4 px) #container (borde: doble medio negro; ancho: 700px; alto: 450px) $(function() ( $(".dragElement").draggable(( contención: "parent")).filter("#dragH").draggable("option", " eje", "x"); )); Arrastrar horizontalmente Arrastrar dentro del padre Ejecutar ejemplo

En este ejemplo, ambos elementos tienen una capacidad limitada para moverse, por lo que solo se pueden arrastrar dentro de su elemento principal, que es un div de tamaño fijo. Uno de los divs que flota tiene la restricción adicional de flotar usando la opción de eje, ya que solo puede moverse horizontalmente dentro de su padre. El resultado se ilustra en la figura:

Limitar la capacidad de mover un elemento a las celdas de la cuadrícula

La opción de cuadrícula le permite establecer la vinculación del elemento movido a las celdas de la cuadrícula. Esta opción toma como valor una matriz de dos elementos que especifican el ancho y alto de las celdas de la cuadrícula en píxeles. A continuación se ofrece un ejemplo del uso de la opción de cuadrícula:

... #draggable (tamaño de fuente: extragrande; borde: negro sólido delgado; ancho: 5em; alineación de texto: centro; relleno: 10px) $(function() ( $("#draggable").draggable( ( red: )); )); Arrástrame Ejecutar ejemplo

Este ejemplo especifica una cuadrícula con celdas de 100 píxeles de ancho y 50 píxeles de alto. Cuando arrastras un elemento, "salta" de una celda (invisible) a otra. El efecto de ajuste es un gran ejemplo de cómo se puede utilizar la funcionalidad de interacción, pero es difícil transmitirlo mediante capturas de pantalla.

Puede crear un efecto de ajuste solo para una dirección configurando el eje de libre movimiento en 1. Por ejemplo, si configura la opción de cuadrícula en , el elemento se ajustará a celdas de cuadrícula de 100 píxeles de ancho cuando se mueva horizontalmente, pero se moverá libremente verticalmente.

Mover retraso

Hay dos opciones que le permiten retrasar el arrastre de un elemento en movimiento. La opción de retraso le permite especificar la cantidad de tiempo, en milisegundos, que el usuario debe arrastrar el puntero del mouse antes de que el elemento se mueva realmente. Otro tipo de retraso lo proporciona la opción de distancia, que especifica la distancia en píxeles que el usuario debe arrastrar el puntero del mouse antes de que un elemento lo siga.

A continuación se ofrece un ejemplo del uso de ambas configuraciones:

... #tiempo, #distancia (tamaño de fuente: grande; borde: negro sólido delgado; relleno: 10px; ancho: 120px; alineación de texto: centro; color de fondo: gris claro; margen: 4px; ) $(función( ) ( $("#time").draggable(( retraso: 1000 )) $("#distance").draggable(( distancia: 150 )) )); Bloque con retardo de tiempo Bloque con distancia mínima Ejecutar ejemplo

En este ejemplo hay dos elementos móviles, uno de los cuales se retrasa mediante la opción de retraso y el otro se retrasa mediante la opción de distancia.

En el caso de un retraso, especificado por la opción de retraso, el usuario debe arrastrar durante un período de tiempo específico antes de mover realmente el elemento. En este ejemplo, la duración de este período es de 1000 ms. No es necesario mover el mouse en este momento, pero durante todo el período de retardo el botón del mouse debe permanecer presionado, después de lo cual se puede mover el elemento moviendo el mouse. Una vez transcurrido el tiempo de retraso, el elemento que se está moviendo se ajustará a la ubicación del puntero del mouse, sujeto a las restricciones impuestas por las opciones de cuadrícula, región y eje discutidas anteriormente.

La opción de distancia tiene un efecto similar, pero en este caso el usuario debe arrastrar el puntero del mouse al menos un número específico de píxeles en cualquier dirección desde la ubicación inicial del elemento. El elemento que se está moviendo saltará a la ubicación actual del puntero.

Si aplica ambas configuraciones al mismo elemento, el elemento movido no se moverá hasta que se cumplan ambos criterios de retraso, es decir, hasta que un intento de arrastrar un elemento dure un período de tiempo específico y hasta que el puntero del mouse se mueva un número específico de píxeles.

Usando métodos de interacción arrastrables

Todos los métodos definidos para la interacción arrastrable son parte del conjunto de métodos básicos que ya has visto al mirar los widgets. No existen métodos específicos para la interacción arrastrable, por lo que no los cubriremos en detalle. La lista de métodos disponibles se proporciona en la siguiente tabla:

Uso de eventos de interacción arrastrables

Interaction Draggable admite un conjunto simple de eventos que le notifican cuando se arrastra un elemento. Estos eventos se describen en la siguiente tabla:

Al igual que con los eventos de widgets, también se puede responder a estos eventos. A continuación se proporciona un ejemplo de cómo manejar los eventos de inicio y parada:

... #draggable (tamaño de fuente: extragrande; borde: negro sólido delgado; ancho: 190 px; alineación de texto: centro; relleno: 10 px) $(function() ( $("#draggable").draggable( ( inicio: función() ( $("#draggable").text("Arrástrame..."), parada: función() ( $("#draggable").text("Arrástrame") ) )) ; )); Arrástrame Ejecutar ejemplo

Este ejemplo utiliza los eventos de inicio y detención para cambiar el contenido de texto de un elemento a medida que se arrastra. Esta ventaja se debe al hecho de que la interacción de Draggable se implementa completamente usando HTML y CSS: puedes usar jQuery para cambiar el estado de un elemento arrastrable incluso mientras se mueve por la pantalla.

Uso de la interacción que se puede soltar

Arrastrar un elemento por sí solo puede ser suficiente en algunas situaciones, pero es más útil cuando se usa junto con la interacción Droppable.

Los elementos a los que se ha aplicado la interacción Arrastrable (elementos receptores) obtienen la capacidad de aceptar elementos móviles creados mediante la interacción Arrastrable.

Los elementos receptores se crean utilizando el método droppable(), pero para obtener una funcionalidad útil necesitarás crear controladores de eventos entre los definidos para este tipo de interacción. Los eventos disponibles se muestran en la siguiente tabla:

Eventos de interacción desplegables descripción del evento

crear	Ocurre cuando se aplica una interacción Droppable a un elemento
activar	Ocurre cuando el usuario comienza a arrastrar el elemento que se está moviendo.
desactivar	Ocurre cuando el usuario deja de arrastrar el elemento que se está moviendo.
encima	Ocurre cuando el usuario arrastra un elemento flotante sobre un elemento receptor (siempre que aún no se haya soltado el botón del mouse)
afuera	Ocurre cuando el usuario arrastra el elemento que se está moviendo fuera del elemento receptor.
gota	Ocurre cuando el usuario deja el elemento que se está moviendo en el elemento receptor.

A continuación se muestra un ejemplo de creación de un elemento receptor simple para el cual se define un controlador de eventos de caída única:

... #draggable, #droppable (tamaño de fuente: grande; borde: negro sólido delgado; relleno: 10px; ancho: 100px; alineación de texto: centro; color de fondo: gris claro; margen: 4px;) #droppable (relleno : 20px; posición: absoluta; derecha: 5px;) $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $(" #draggable").text("Izquierda") ) )); )); Déjame aquí Arrástrame Ejecutar ejemplo

Este ejemplo agrega un elemento div al documento cuyo contenido de texto está representado por la cadena "Dejar aquí". Seleccionamos este elemento usando jQuery y llamamos al método droppable(), pasándole un objeto de configuración que define un controlador para el evento de colocación. La respuesta a este evento es cambiar el texto del elemento que se está moviendo usando el método text().

La interacción Arrastrar y soltar creada en este ejemplo es simple, pero proporciona un contexto útil para explicar cómo funcionan juntas las interacciones Arrastrable y Soltable. Las distintas etapas del proceso de arrastre de elementos se ilustran en la figura:

Todo parece muy simple. Arrastramos el elemento que se está moviendo hasta que queda encima del elemento receptor y lo soltamos. El elemento que se suelta permanece donde se dejó y su contenido de texto cambia en respuesta al evento de colocación. Las siguientes secciones muestran cómo utilizar otros eventos de interacción Droppable para mejorar la experiencia del usuario.

Iluminación del objeto receptor objetivo.

Usando los eventos de activación y desactivación, puede resaltar el objeto receptor de destino cuando el usuario comienza el proceso de arrastrar un elemento. En muchas situaciones, esta idea es muy fructífera porque proporciona al usuario una guía fiable sobre qué elementos forman parte del modelo de arrastrar y soltar. A continuación se proporciona un ejemplo correspondiente:

... $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Izquierda ") ), activar: función() ( $("#droppable").css(( borde: "verde doble medio", color de fondo: "verde claro" )); ), desactivar: función() ( $("#droppable ").css("borde", "").css("color de fondo", ""); ) )); )); ...Ejecutar ejemplo

Tan pronto como el usuario comienza a arrastrar un elemento, se activa el evento de activación asociado con nuestro elemento receptor y la función del controlador usa el método css() para cambiar las propiedades CSS del borde y el color de fondo de ese elemento. Como resultado, el elemento receptor de destino se resalta, lo que indica al usuario que existe una conexión entre él y el elemento que se está moviendo.

El evento de desactivación se utiliza para eliminar los valores de propiedad CSS del elemento receptor y devolverlo a su estado original tan pronto como el usuario suelta el botón del mouse. (Este evento ocurre cada vez que se detiene el arrastre de un elemento, independientemente de si el elemento que se arrastra se deja en el elemento receptor o no). Este proceso se ilustra en la figura:

Manejo de elementos superpuestos

La tecnología de arrastrar y soltar se puede mejorar añadiendo y eliminando el manejo de eventos. El evento excesivo ocurre cuando el 50% del elemento que se está moviendo está sobre cualquier parte del elemento receptor. El evento de salida ocurre cuando los elementos que previamente se superponían ya no se superponen. A continuación se ofrece un ejemplo de la respuesta a estos eventos:

$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Izquierda") ) , activar: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), desactivar: function() ( $("#droppable"). css("border", "").css("color de fondo", ""); ), sobre: ​​función() ( $("#droppable").css(( borde: "rojo doble medio", color de fondo : "rojo" )); ), salida: función() ( $("#droppable").css("border", "").css("color de fondo", ""); ) )); ) ); Ejecutar ejemplo

Aquí se utilizan las mismas funciones de controlador que en el ejemplo anterior, pero en este caso están asociadas con los eventos over y out. Cuando el elemento receptor se superpone al menos el 50% del elemento que se está moviendo, se encierra en un marco y su color de fondo cambia, como se muestra en la figura:

Este límite del 50% se denomina umbral de superposición (tolerancia), cuyo valor se puede establecer al crear el elemento receptor, como se mostrará más adelante.

Configurar interacciones desplegables

La interacción Droppable tiene una serie de propiedades que puede cambiar para personalizar su comportamiento. Estas propiedades se enumeran en la siguiente tabla:

Propiedades de interacción desplegables descripción de propiedad

desactivado	Si esta opción es verdadera, la funcionalidad de interacción Droppable está inicialmente deshabilitada. El valor predeterminado es falso
aceptar	Acota el conjunto de elementos móviles a los que responderá el elemento receptor. El valor predeterminado es *, que coincide con cualquier elemento.
clase activa	Define una clase que se asignará en respuesta al evento de activación y se eliminará en respuesta al evento de desactivación.
clase flotante	Define una clase que se asignará en respuesta a un evento excesivo y se eliminará en respuesta a un evento externo.
tolerancia	Define el grado mínimo de superposición en el que se produce un evento excesivo.

Limitar los elementos permitidos a mover

Puede limitar el conjunto de elementos desplegables que aceptará un elemento con funcionalidad de interoperabilidad desplegable mediante la opción aceptar. El valor de la opción aceptar debe establecerse en un selector. Como resultado, los eventos de interacción Droppable solo ocurrirán si el elemento que se mueve coincide con el selector especificado. A continuación se proporciona un ejemplo correspondiente:

... .draggable, #droppable (tamaño de fuente: grande; borde: negro sólido delgado; relleno: 10px; ancho: 100px; alineación de texto: centro; color de fondo: gris claro; margen: 4px;) #droppable (relleno : 20px; posición: absoluta; derecha: 5px;) $(function() ( $(".draggable").draggable(); $("#droppable").droppable(( drop: function(event, ui) ( ui.draggable.text("Left") ), activar: función() ( $("#droppable").css(( borde: "verde doble medio", color de fondo: "verde claro" )); ), desactivar: función () ( $("#droppable").css("border", "").css("color de fondo", ""); ), aceptar: "#drag1" )); )); Dejar aquí Elemento 1 Elemento 2 Ejecutar ejemplo

En este ejemplo hay dos elementos que se pueden arrastrar con los ID arrastrar1 y arrastrar2. Al crear un elemento receptor utilizamos la opción aceptar, con la que indicamos que solo el elemento drag1 será un elemento aceptable para mover.

Cuando arrastre el elemento drag1, verá el mismo efecto que en los ejemplos anteriores. En los momentos apropiados, se activarán los eventos de activación, desactivación, sobre y salida para el elemento receptor. Al mismo tiempo, si arrastra un elemento drag2 que no coincide con el selector especificado en el parámetro de aceptación, estos eventos no se activarán. Este elemento se puede mover libremente, pero no será percibido por el elemento receptor.

Observe el cambio en la forma en que seleccionamos un elemento flotante aceptable para llamar al método text(). Cuando solo había un elemento en movimiento en el documento, el atributo id era suficiente para esto:

Soltar: función() ( $("#draggable").text("Left") ),

En este ejemplo hay dos elementos que se van a mover y seleccionar por atributo id no dará resultado deseado, ya que el texto en este caso siempre cambiará en el mismo elemento flotante, independientemente de cuál sea aceptable para el elemento receptor.

La solución es utilizar el objeto ui, que jQuery UI proporciona como argumento adicional para cada controlador de eventos. La propiedad arrastrable de un objeto ui devuelve un objeto jQuery que contiene el elemento que el usuario arrastra o intenta soltar en el elemento de destino, lo que permite seleccionar el elemento deseado de esta manera:

Soltar: función(evento, ui) ( ui.draggable.text("Izquierda") ),

Cambiar el umbral de superposición

De forma predeterminada, el evento over solo ocurre cuando al menos el 50% del elemento que se mueve se superpone al elemento receptor. La cantidad de superposición de este umbral se puede cambiar usando la opción de tolerancia, que puede tomar los valores que se muestran en la siguiente tabla:

Los dos valores que uso con más frecuencia son ajuste y tacto porque tienen más sentido para los usuarios. Utilizo fit cuando el elemento arrastrado necesita permanecer en el área del elemento receptor al que se movió, y touch cuando el elemento arrastrado necesita regresar a su posición original (se dará un ejemplo a continuación). A continuación se proporciona un ejemplo del uso de los parámetros de ajuste y tacto:

El valor de clonación le dice a jQuery UI que cree una copia del elemento que se está moviendo, junto con todo su contenido, y use el resultado resultante como elemento auxiliar. El resultado se muestra en la figura:

El elemento auxiliar se elimina cuando el usuario suelta el botón del mouse sobre el elemento que se está moviendo, dejando el elemento que se está moviendo y el elemento receptor en sus posiciones originales.

Como se muestra en la figura, el elemento original que se está moviendo permanece en su lugar y solo el elemento auxiliar se mueve por la pantalla siguiendo el puntero del mouse. Si el tamaño del elemento movido es grande, como en nuestro ejemplo, entonces cubre el resto de los elementos del documento, por lo que al usuario le resultará difícil incluso rastrear la posición del elemento receptor. Este problema se puede solucionar proporcionando la función como valor de la opción auxiliar, como se muestra en el siguiente ejemplo:

... $(función() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); ...Ejecutar ejemplo

Cuando el usuario comienza a arrastrar un elemento, jQuery UI llama a la función especificada por el parámetro auxiliar y utiliza el elemento devuelto como objeto a arrastrar. En este caso, estoy usando jQuery para crear el elemento img. El resultado se muestra en la figura:

Una imagen pequeña actúa como proxy del elemento que se está moviendo, lo que hace que sea mucho más fácil realizar un seguimiento de otros elementos del documento.

El objeto ui que jQuery UI pasa a los eventos de interacción Droppable contiene una propiedad de ayuda, y esta propiedad se puede utilizar para manipular la ayuda mientras se arrastra. A continuación se proporciona un ejemplo del uso de esta propiedad junto con los eventos over y out:

... $(función() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "sólido grueso #27e6ed") ) , salida: función(evento, ui) ( ui.helper.css("frontera", "") ) )); )); ...

Aquí, los eventos over y out y la propiedad ui.helper se utilizan para mostrar un borde alrededor del elemento auxiliar cuando se superpone al elemento receptor. El resultado se muestra en la figura:

Ajustar a los bordes del elemento

Usando la opción de ajuste, puede asegurarse de que el elemento movido sea "atraído" hacia los bordes de los elementos junto a los cuales pasa. Esta opción acepta un selector como valor. El elemento que se está moviendo se ajustará a los bordes de cualquier elemento que coincida con el selector especificado. A continuación se ofrece un ejemplo del uso de la opción de ajuste:

Ejecute el ejemplo de jQuery UI #snapper, .draggable, .droppable (tamaño de fuente: grande; borde: negro medio sólido; relleno: 4px; ancho: 150px; alineación de texto: centro; color de fondo: gris claro; margen inferior: 10px ;).droppable (margen-derecho: 5px; alto: 50px; ancho: 120px) #dropContainer (posición: absoluta; derecha: 5px;) div span (posición: relativa; arriba: 25%) .droppable.active (borde: verde sólido medio) .droppable.hover (color de fondo: verde claro) #snapper (posición: absoluta; izquierda: 35%; borde: negro sólido medio; ancho: 180px; alto: 50px) $(function() ( $(" div.draggable").draggable(( snap: "#snapper, .droppable", snapMode: "both", snapTolerance: 50 )); $("#basket").droppable(( activeClass: "active", hoverClass: "flotar" )); )); Carrito Encaja aquí Arrástrame

Cuando un elemento en movimiento se acerca a uno de los elementos adecuados, es, por así decirlo, "atraído" hacia él de tal manera que sus bordes adyacentes se tocan. Para dicha vinculación, puede seleccionar cualquier elemento, no solo el elemento receptor. En este ejemplo, agregué un elemento div y configuré la opción de ajuste en un valor que selecciona ese elemento así como el elemento receptor en el documento.

Hay un par de opciones de ayuda que le permiten personalizar con mayor precisión el comportamiento de anclaje de los elementos. Una de ellas es la opción snapMode. Con su ayuda puedes especificar el tipo de encuadernación. Se permiten los siguientes valores: interno(ajustar a los bordes interiores de los elementos), exterior(ajustar a los bordes exteriores de los elementos) y ambos(ajustar a todos los bordes; predeterminado).

La opción snapTolerance le permite especificar hasta qué punto debe acercarse el elemento flotante al borde del elemento de destino antes de que se produzca el ajuste. El valor predeterminado es 20, lo que significa 20 píxeles. El ejemplo utiliza un valor de 50, que corresponde a un ajuste a una distancia mayor. Es muy importante elegir el valor correcto para esta opción. Si el valor de snapTolerance es demasiado bajo, es posible que el usuario no note el efecto de ajuste, y si es demasiado alto, el elemento que se está moviendo comenzará a realizar saltos inesperados, ajustándose a elementos distantes.

Las técnicas de arrastrar y soltar han evolucionado a lo largo de muchos años. No sorprende que con el creciente número de programadores que desarrollan complementos de código abierto código fuente(por ejemplo, para jQuery) los métodos antiguos se reviven nuevamente. La biblioteca JavaScript tiene una gran capacidad de respuesta y ofrece muchas mejoras en esta era de la tecnología web.

En este tutorial crearemos un script que puede utilizar para crear rectángulos dinámicos de arrastrar y soltar en su sitio web. El proceso es gestionado por jQuery. ¡Estos scripts ahorran tiempo al proporcionar funciones listas para usar! Y la biblioteca de arrastrar y soltar se puede utilizar en otros proyectos.

Preparando contenido

En primer lugar, preparemos un pequeño sitio web para el proyecto. En la carpeta del proyecto, debe crear dos directorios con los nombres notables "js" y "css" y archivo vacío índice.html. El código será muy simple, para que haya una idea clara del trabajo y haya un punto para un mayor desarrollo.

A continuación se muestra el código de nuestro archivo HTML. en el capitulo cabeza Incluimos 3 guiones. El script jQuery principal se cargará desde el servidor de Google Code. También se incluye nuestro archivo de estilo style.css, que contiene las propiedades principales para formar apariencia nuestro documento.

Arrástrame Sí, sí. Exactamente yo. Tú también puedes arrastrarme (zIndex: 200, opacidad: .9)

P.D.: ¡puedes dejarme en cualquier lugar!

Sección interior cuerpo solo se colocan dos bloques div, que contienen ambos rectángulos. El código es bastante simple y comprensible. Dentro de cada rectángulo hay encabezados con las clases handler y handler2. Esto es importante porque cada rectángulo se comporta de manera diferente al arrastrarlo.

Instalación de CSS

El código HTML es muy simple. Si comprende el marcado básico, entonces estilos CSS Tampoco presentará ninguna dificultad. Principalmente márgenes, rellenos y colores definidos.

Cuerpo,html (familia de fuente:Calibri, sans-serif; fondo:#eaf3fb; tamaño de fuente:12px; altura:1000px; altura de línea:18px; ) p (altura:30px; )

Selectores cuerpo, html se utilizan sólo para la página de demostración. Y todo el contenido se coloca en dos rectángulos que se pueden arrastrar.

Dv1 (ancho:200px; color de fondo:#eff7ff; borde:1px sólido #96c2f1; posición:absoluta; izquierda:100px; arriba:100px; ) .dv1 h2 (color de fondo:#b2d3f5; relleno:5px; fuente- familia: Georgia, "Times New Roman", Times, serif; tamaño de fuente: 1,0 em; transformación de texto: mayúscula; peso de fuente: negrita; color:#3a424a; margen: 1 px; cursor: mover; ) .dv1 div ( relleno:5px; margen inferior:10px; ) .dv2 ( color de fondo:#f6ebfb; borde:1px sólido #a36fde; ancho:550px; posición:absoluta; cursor:mover; izquierda:400px; arriba:230px; ) .dv2 h2 (color de fondo:#eacfe9; espacio entre letras:-0.09em; tamaño de fuente:1.8em; peso de fuente: negrita; relleno:15px; margen:1px; color:#241f24; cursor:mover;) .dv2 .content2 ( relleno:5px; margen inferior:10px; )

Para ambas clases .dv1 y .dv2 utilizamos posicionamiento absoluto. Esto no es necesario y probablemente no sea lo más La mejor manera para colocar rectángulos arrastrables. Sin embargo, para nuestro ejemplo, este posicionamiento tiene sentido, ya que cada vez que se actualiza la página, los rectángulos se instalan en ciertos lugares.

Además, las fuentes y los colores son diferentes para los rectángulos para que sea más fácil ver la diferencia.

Por lo demás, los títulos y el contenido de los bloques son casi idénticos. Si va a copiar estilos en su proyecto, cambie los nombres antes de comenzar. En algunos casos, tiene más sentido usar ID en lugar de clases, como cuando se usa la técnica de arrastrar y soltar para un bloque específico.

Analizando JavaScript

Dos archivos JavaScript contienen todo el código necesario para que funcione. Omitiremos los detalles sobre cómo trabajar con jQuery, ya que esto está más allá del alcance de la lección. Prestemos atención al archivo jquery.dragndrop.js.

La línea 22 define la función Arrastra.

$.fn.Drags = función(opts) ( var ps = $.extend(( zIndex: 20, opacidad: .7, controlador: nulo, onMove: función() ( ), onDrop: función() ( ) ), opta );

Esto establece la variable de retorno y los datos de inicialización para Arrastra. Este método se usa muy comúnmente cuando se trabaja con jQuery para pasar opciones a otras funciones. Internamente establecemos variables para todos Opciones Disponibles para rectángulos arrastrables.

El siguiente fragmento de código incluye controladores de eventos para la variable dragndrop. Ambos eventos arrastrar Y gota llamar a funciones pasándoles parámetros de eventos. Estos eventos ocurren cuando presiona el botón del mouse para arrastrar un objeto y luego lo suelta.

Var dragndrop = ( arrastrar: función(e) ( var dragData = e.data.dragData; dragData.target.css(( izquierda: dragData.left + e.pageX - dragData.offLeft, arriba: dragData.top + e.pageY - dragData.offTop )); dragData.handler.css(( cursor: "mover" )); dragData.target.css (( cursor: "mover" )); dragData.onMove(e); ), soltar: función( e) ( var dragData = e.data.dragData; dragData.target.css(dragData.oldCss); //.css(( "opacity": "" )); dragData.handler.css("cursor", dragData. oldCss.cursor); dragData.onDrop(e); $().unbind("mousemove", dragndrop.drag) .unbind("mouseup", dragndrop.drop); ) )

Nuestras funciones manipulan el posicionamiento CSS de cada objeto. Cambiar la posición absoluta de sus objetos no afectará el funcionamiento de su código, ya que cada función de JavaScript cambia cualquier estilo definido para el objeto.

El resto del código verifica el controlador y realiza cambios estéticos en otros estilos. Aquí puede agregar cambios en la transparencia, la fuente y el color de la fuente, o agregar nuevos párrafos.

Funciones de arrastrar/soltar

El segundo archivo fn.js contiene un código muy simple. Esperamos hasta que el documento esté completamente cargado, luego de lo cual llamamos a nuestras funciones. Se definen dos instancias de la función. Arrastra, que se discutió anteriormente.

Tenemos dos bloques móviles con clases .dv1 y .dv2. Si necesita dejar un bloque móvil, solo necesita eliminar la segunda parte del código. Agregar otro bloque móvil también es fácil. Solo necesitas agregar nueva caracteristica en este archivo.

El primer paso es configurar las opciones al llamar a la función. Asegúrese de configurar el nombre del controlador. Con él, le decimos a jQuery qué controlador usar cuando se presiona el botón del mouse en un área determinada del documento. El nombre del controlador puede ser una clase o un atributo de ID.

Nuestra primera función tiene dos controladores de eventos, onMove y onDrop. Ambos llaman a nuevas funciones que se pasan al evento actual como variables. Aquí es donde se manipula el código HTML del rectángulo para actualizarlo con cada movimiento. Este es un gran efecto para demostrar cómo se puede controlar un proceso utilizando eventos jQuery simples.

En la segunda función usamos los parámetros z-Index y opacidad. ¿Puedes agregar otras propiedades CSS? pero esto requerirá volver a trabajar el código JavaScript para que se verifiquen las configuraciones. Por ejemplo, puedes pasar un estilo de fuente diferente o valores para la altura y el ancho de un rectángulo en movimiento: ¡un truco muy interesante!

Conclusión

Con un poco de trabajo, ahora tenemos a nuestra disposición una excelente interfaz de arrastrar y soltar. jQuery proporciona enormes beneficios a los desarrolladores que desean utilizar métodos antiguos en sus proyectos.

Como resultado, no solo tenemos funciones de manejo de eventos, sino que también podemos pasar nuevas variables a bloques arrastrables. Esto abre nuevas posibilidades para la creatividad. La demostración de la lección contiene sólo un bosquejo de lo que se puede hacer utilizando dicho código.

Consulte la documentación de jQuery para utilizar las funciones de la biblioteca.

Es más fácil tomar algo y dejarlo que escribir lo que hay que llevar y dónde ponerlo. Por supuesto, sin un mouse o dispositivo similar, no puedes seleccionar nada ni especificar nada, pero incluso en el estado actual de las cosas, usar la idea de “arrastrar y soltar” es muy natural y cómodo.

El alcance de la idea está lejos de limitarse a tiendas online, bibliotecas electrónicas, motores de búsqueda o Sistemas de información, y también el ámbito aplicado. La idea es muy aplicable en el desarrollo de sitios web y sus elementos, creados y mantenidos de forma interactiva, sin la participación de un programador.

Descripción de la idea

Seleccionar, mover y colocar: la idea es natural y cómoda. Es simplemente sorprendente que no haya nacido cuando el mouse se convirtió en un accesorio informático indispensable.

El ejemplo más evidente es la elección de un producto en una tienda online. Coger el producto deseado con el ratón y arrastrarlo al carrito de la compra es sencillo, natural y cómodo. Cargar archivos: tomar un documento fuera de la ventana del navegador y colocarlo en un elemento de la página, activando así la transferencia del documento al servidor, también es una idea práctica.

Para un desarrollador, la idea de "arrastrar y soltar" es manipular elementos de la página sin recalcular manualmente las coordenadas y tamaños de las etiquetas, la capacidad de seleccionar múltiples elementos y alinearlos, así como mover los lados de las etiquetas de bloque.

HTML y CSS son lenguajes excelentes para describir etiquetas y diseñarlas, pero cuando un desarrollador tiene la capacidad de manipular interactivamente los elementos de la página sin volver a calcular manualmente las coordenadas y los tamaños, esto hace que el trabajo sea más cómodo y eficiente.

Fácil transferencia de archivos

"Arrastrar y soltar": la traducción del inglés al ruso suena literalmente como "arrastrar y soltar". En la práctica, suena y funciona mejor: elegir, transferir y publicar, de forma sencilla y natural.

Es muy sencillo implementar la transferencia de archivos de una página a otra, a un servidor o para otro uso.

En este ejemplo, se seleccionaron varios archivos del escritorio con el mouse (figura de la izquierda). Sobre la selección se presionaba el botón izquierdo del mouse y el seleccionado “iba” a la canasta. El propio navegador mostró cómo sucede esto, escribió una sugerencia de "copiar" y creó esquemas de los archivos movidos a su alrededor.

Cuando el mouse estaba sobre la cesta, el visitante soltó el botón izquierdo del mouse, se llevó a cabo el evento de “arrastrar y soltar” y en la página del sitio (imagen inferior) el código JavaScript pudo recibir y procesar todos los archivos que el visitante proporcionó. a la página (sitio).

Descripción de la implementación

El código que realiza este procedimiento es muy sencillo. Incluso un desarrollador novato puede repetirlo en cualquier caso de uso.

Aquí la interfaz de usuario está representada por dos etiquetas: scPlaceFile (esta es la cesta donde debe colocar los archivos) y scPlaceFiles (este es el resultado del procesamiento de archivos, en este caso una lista de ellos).

La lógica de la página es la siguiente. Cuando se carga una página en el navegador, el controlador de eventos "ondrop" se asigna a la cesta; los demás eventos se bloquean y no se utilizan.

La página funciona como de costumbre, pero tan pronto como el visitante selecciona un archivo (archivos) y los arrastra a la imagen del carrito, es decir, a la etiqueta scPlaceFile, se activará el procesamiento del evento "los archivos han llegado".

Este controlador simplemente muestra una lista de archivos. Su número está en event.dataTransfer.files.length y la información sobre cada archivo está en event.dataTransfer.files[i].name. El desarrollador determina qué hacer con los datos recibidos; en este caso, simplemente se genera una lista de archivos recibidos.

Después del procesamiento, el evento se bloquea y no se propaga. Esto es necesario para que el navegador no realice actividades de aficionados y no interfiera con el procesamiento de la información recibida.

DnD y datos externos

Cargar imágenes al servidor mediante arrastrar y soltar es una práctica común al utilizar esta tecnología. Normalmente, el desarrollador crea un formulario de carga de archivos (1) que funciona normalmente (2). El visitante puede seleccionar archivos y descargarlos como de costumbre.

Sin embargo, si un visitante arrastra y suelta un lugar específico en el formulario, el campo del nombre del archivo se completará automáticamente.

Este Buena decisión. Por supuesto, es muy difícil admitir que no hay un mouse en la computadora. Pero es mejor desarrollar la interfaz de usuario en la versión habitual y en la implementación DnD.

DnD y datos internos

Cuidar los intereses del visitante siempre es importante, pero también importan las preocupaciones del desarrollador. Puedes implementar “arrastrar y soltar” no solo medios estándar, sino también procesando eventos del mouse en elementos de la página.

La tarea de calcular los valores de las coordenadas de las etiquetas y sus tamaños surge constantemente. El cálculo manual es una buena práctica, pero la opción interactiva es más conveniente. Todas las etiquetas siempre tienen una forma rectangular y, al rastrear los eventos del "mouse" en los lados de los elementos, puede crear la capacidad de mover elementos automáticamente a la ubicación deseada en la página o cambiarlos.

Manejo del evento de clic del mouse: recordar las coordenadas de la ubicación del clic, por ejemplo, uno de los lados del elemento. Moviendo el mouse: el lado se mueve en la dirección deseada. Al soltar el botón del ratón, el lateral se detiene y sus coordenadas cambian. De esta forma puedes cambiar la posición del elemento o su tamaño.

Formalmente, esto no es "arrastrar y soltar", pero el efecto es similar y práctico. Al crear controladores universales para cualquier elemento de la página, puede obtener un buen resultado interactivo, acelerar el desarrollo y simplificar el código.

Programación visual y manual.

Ratón en la computadora y dedos en el teléfono inteligente: absolutamente diferentes aproximaciones a la implementación de la interfaz de usuario (visitante, desarrollador). El requisito de compatibilidad entre navegadores es bastante natural y moderno.

Todo esto en conjunto dificulta la creación de páginas, pero aplicando la idea de "arrastrar y soltar" en su forma estándar, usando sus eventos, combinando esta idea con eventos ordinarios en elementos, es posible implementar un mecanismo en qué página se creará visualmente.

Ahora veamos cómo seleccionar un elemento o elementos. El hecho de la selección es la aparición de un menú contextual, por ejemplo, el objetivo es alinear lo seleccionado (izquierda, derecha, centro), o distribuir elementos vertical u horizontalmente con el mismo paso, o cambiar sus tamaños (mínimo, máximo). .

El recálculo automático de coordenadas y dimensiones es preferible al recálculo manual. Menos errores significan que el objetivo se logra más rápido. Además, puedes crear una página en un navegador, guardando la posición y el tamaño de los elementos. Al abrir esta página en su teléfono inteligente, puede corregir las coordenadas y dimensiones y recordarlas para un modelo de teléfono inteligente o una versión de navegador específicos.

Por lo tanto, la misma página sin cumplir manualmente con el requisito de varios navegadores tendrá datos diferentes mostrados en varios dispositivos y en varios navegadores.

Al permitir al visitante realizar estos procedimientos de forma independiente y también seleccionar los elementos necesarios de la página entre los proporcionados por el desarrollador, es posible garantizar la compatibilidad entre navegadores y la funcionalidad requerida de la página, teniendo en cuenta la opinión del usuario.

Uso de la tecnología arrastrar y soltar(arrastrar y soltar) permite al usuario mover varios objetos de uno a otro, por ejemplo, elementos de una lista a otra. Para hacer esto, necesita usar dos controles: receptor y fuente. El receptor es el objeto que recibirá el objeto fuente (el objeto que se está moviendo).

Los eventos que ocurren durante el movimiento de objetos se enumeran a continuación en el orden en que ocurren.

Al iniciar arrastrar(escriba TStartDragEvent): al comienzo de la operación, generada por el objeto fuente. Parámetros que se pasan al controlador de eventos: objeto receptor DragObject (tipo TDragObject), objeto fuente (tipo TObject).

Al arrastrar sobre(tipo TDragOverEvent): crea un objeto receptor cuando un objeto arrastrado está sobre él. Parámetros que se pasan al controlador de eventos: objeto receptor Remitente (tipo TObject), objeto fuente Fuente (tipo TObject), estado de movimiento Estado (tipo TDragState), X e Y (tipo entero): coordenadas actuales del puntero del mouse, Aceptar ( tipo booleano) signo de confirmación de la operación de movimiento. El estado de movimiento deja claro si el objeto que se está moviendo se encuentra en la zona de recepción, se mueve en ella o ha salido de ella. Los parámetros pasados ​​permiten que el objeto de destino acepte o rechace el objeto de origen. El parámetro Aceptar se establece en Trye si se acepta la operación de movimiento; de lo contrario, se establece en False.

onDragDrop (tipo TDragDropEvent): generado por el objeto receptor cuando el objeto arrastrado se suelta sobre él. Al controlador de eventos se le pasan las coordenadas actuales del puntero del mouse, el objeto receptor del remitente (tipo TObject) y el objeto de movimiento original Fuente (tipo TObject).

onEndDrag (tipo EndDragEvent): se genera cuando se completa una operación de arrastre. Las coordenadas X e Y del punto donde el objeto del remitente de origen y el objeto de destino del receptor se pasan al controlador de eventos.

Para crear un arrastrar y soltar, es suficiente implementar dos eventos: OnDragDrop y OnDragOver con la propiedad DragMode establecida en dmAutomatic. De lo contrario, el inicio de la operación de arrastre, el método BeginDrag, debe ser codificado por el programador.

Para consolidar el material crearemos la siguiente aplicación. Coloque el componente Panel en el formulario. Establezca la propiedad DragMode del Inspector de objetos en dmAutomatic. Seleccionemos el objeto de formulario y usemos el Inspector de objetos para crear los siguientes eventos:

Procedimiento TForm1.FormDragOver(Remitente, Fuente: TObject; X, Y: Entero; Estado: TDragState; var Aceptar: Booleano); comenzar si Fuente = Panel1 entonces Aceptar: = Verdadero, de lo contrario Aceptar: = Falso; fin; procedimiento TForm1.FormDragDrop(Remitente, Fuente: TObject; X, Y: Entero); comenzar Panel1.Izquierda:= X; Panel1.Arriba:= Y; fin;

Ahora, al iniciar la aplicación y hacer clic con el botón del mouse sobre el panel, podemos mover el objeto del panel por todo el formulario.

En pocas palabras: nos familiarizamos con la tecnología. arrastrar y soltar(arrastrar y soltar) y lo usé en la práctica.