Cuestiones generales y teoría de la tecnología Drag and Drop. Tecnología arrastrar y soltar en Android Mira qué es “Arrastrar y soltar” en otros diccionarios
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 arrastrableHay 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:
| 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. |
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:
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:
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 retrasoHay 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 arrastrablesTodos 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 arrastrablesInteraction 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 desplegableArrastrar 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:
| 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 el estado inicial, 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:
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 desplegablesLa interacción Droppable tiene una serie de propiedades que puede cambiar para personalizar su comportamiento. Estas propiedades se enumeran en la siguiente tabla:
| 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. |
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 flotantes, y seleccionar por atributo id no producirá el 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ónDe 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:
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 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.
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.
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 (como jQuery), se estén reviviendo métodos antiguos. 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.
En primer lugar, preparemos un pequeño sitio web para el proyecto. En la carpeta del proyecto necesitas crear dos directorios con los nombres notables "js" y "css" y un 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.
El código HTML es muy simple. Si comprende el marcado básico, los estilos CSS tampoco serán difíciles. 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 JavaScriptDos 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 configuramos variables para todas las opciones disponibles para los rectángulos que se arrastran.
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/soltarEl segundo archivo fn.js contiene un código muy simple. Estamos esperando carga completa documento, después del 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. Sólo necesita agregar una nueva función 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ónCon 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.
Para la biblioteca VCL, Borland ha implementado su propia versión de la interfaz Drag&Drop (traducida como "arrastrar y soltar"). Esta interfaz es interna: puede enviar y recibir cualquier control Delphi dentro del formulario (excepto el formulario en sí) y se implementa sin utilizar las funciones correspondientes de la API de Windows; deben usarse al organizar la comunicación con otras tareas arrastrando y soltando.
Al hacer clic con el botón izquierdo del ratón sobre un control, podemos “arrastrarlo” a cualquier otro elemento. Desde el punto de vista de un programador, esto significa que en el momento de arrastrar y soltar una tecla, se generan ciertos eventos que transmiten toda la información necesaria: un puntero al objeto arrastrado, las coordenadas actuales del cursor, etc. de los eventos es el elemento en el que se encuentra actualmente el cursor. El controlador de tal evento debe decirle al sistema si el control recibe el envío o no. Cuando se suelta el botón encima del control del receptor, se generan uno o dos eventos más, dependiendo de la preparación del receptor.
CancelDrag Cancela la operación actual de arrastrar y soltar o arrastrar y acoplar.
Función FindDragTarget (const Pos: TPoint; AllowDisabled: Boolean): TControl;
La función devuelve un objeto de la clase base TControl, que hace referencia a la posición de la pantalla con las coordenadas definidas por el parámetro Pos. Esta función se utiliza para determinar el destinatario potencial de una operación de arrastrar y soltar o de arrastrar y acoplar. Si no existe ningún control de ventana para la posición especificada, la función devuelve nil. El parámetro AllowDisabled determina si se tendrán en cuenta los objetos deshabilitados.
Función IsDragObject (Remitente: TObject): booleano;
La función determina si el objeto especificado en el parámetro Sender es descendiente de la clase TDragObject. Esta función se puede utilizar como parámetro Fuente en los controladores de eventos OnDragOver y OnDockOver para determinar si se aceptará el objeto arrastrado. La función IsDragObject también se puede utilizar como parámetro Fuente en los controladores de eventos OnDragDrop y OnDockDrop para interpretar correctamente el objeto arrastrado.
Propiedades DragMode, DragCursor, métodos BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag, aceptar parámetro
El proceso de arrastrar información de un objeto a otro usando el mouse es muy utilizado en Windows, puedes mover archivos entre carpetas, mover las propias carpetas, etc.
Todas las propiedades, métodos y eventos asociados con el proceso de arrastrar y soltar se definen en la clase TControl, que es la progenitora de todos los componentes visuales de Delphi. Por tanto son comunes a todos los componentes.
El inicio del arrastre está determinado por la propiedad DragMode, que se puede establecer en tiempo de diseño o mediante programación igual a dmManual o dmAutomatic. El valor dmAutomatic especifica si el proceso de arrastre comenzará automáticamente cuando el usuario presione un botón del mouse sobre un componente. Sin embargo, en este caso, el evento OnMouseDown asociado con el usuario que hace clic en el botón del mouse no ocurre en absoluto para este componente.
La interfaz para transferir y recibir componentes apareció hace bastante tiempo. Permite que dos controles interactúen mientras la aplicación se está ejecutando. En este caso, se pueden realizar todas las operaciones necesarias. A pesar de la facilidad de implementación y el desarrollo de larga data, muchos programadores (especialmente los principiantes) consideran este mecanismo oscuro y exótico. Sin embargo, usar Arrastrar y Soltar puede resultar muy útil y fácil de implementar. Ahora nos aseguraremos de esto.
Para que el mecanismo funcione, es necesario configurar dos controles en consecuencia. Uno debe ser una fuente (Fuente), el segundo debe ser un receptor (Destino). En este caso, la fuente no se mueve a ninguna parte, sino que sólo queda registrada como tal en el mecanismo.
Créame, basta con convertir las coordenadas X,Y pasadas en los parámetros de los eventos OnDragOver y OnDragDrop en coordenadas de formulario.
Trabaje con las propiedades Izquierda y Superior del componente sobre el que se mueve el cursor. Dejame darte un ejemplo simple. Coloque un componente Memo en el formulario y establezca la propiedad Alinear en alTop. Coloque un panel en el formulario, establezca también la propiedad Alinear en alTop y establezca la propiedad Altura en un valor pequeño, digamos 6 o 7 píxeles. Establezca DragMode en dmAutomatica y DragCursor en crVSplit. Coloque otro componente Memo y configure Alinear en alClient. Seleccione simultáneamente ambos componentes de Memo, el panel y cree un controlador de eventos OnDragOver común como se muestra a continuación:
Recientemente tuve la idea de empezar a desarrollar un juego para Android. Para empezar, decidí escribir ajedrez. Me pareció que la tecnología Drag and Drop sería perfecta para implementar el mecanismo de figuras en movimiento. Para los no iniciados, observo que el método de arrastrar y soltar es la capacidad de arrastrar un objeto gráfico sobre otro y realizar una u otra acción después de soltarlo. El ejemplo más simple es eliminar un acceso directo del escritorio de su PC arrastrándolo a la papelera. Al “tirar” la etiqueta a la basura, le decimos al sistema que queremos forzar a estos dos objetos a interactuar. El sistema recibe nuestra señal y decide qué acción debe tomar. Arrastrar y soltar se ha generalizado debido a su claridad intuitiva. Este enfoque está respaldado por nuestra experiencia en la interacción con objetos del mundo real y funciona muy bien en un entorno virtual. En cuanto al ajedrez, usando arrastrar y soltar es tecnológicamente más fácil determinar la celda donde el usuario arrastró la pieza, ya que no es necesario calcular el número de celda a partir de las coordenadas del punto de liberación. Este trabajo será asumido por la máquina virtual.
Usar la tecnología de arrastrar y soltar me permite resolver tres problemas con poco esfuerzo:
Las tareas han sido delineadas, comencemos a implementarlas.
Sustitución de ImageView al tactoTodas mis formas son objetos ImageView. Desafortunadamente, resultó que la implementación de Arrastrar y Soltar en Android no permite reemplazar "directamente" la imagen de un objeto cuando se toca. Sin embargo, esta tarea se puede resolver completamente utilizando la API. Tendremos que realizar una serie de sencillos pasos:
Estas acciones deben implementarse en el controlador OnTouchListner del objeto ImageView. Para hacer esto, anulemos el método onTouch:
@ Anular onTouch público booleano(Ver vista, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ); View. DragShadowBuilder dsb= new View. DragShadowBuilder (ver); ver.startDrag(clipData, dsb, ver, 0); ver.setVisibility(Ver.INVISIBLE); devolver verdadero;) más (retornar falso;))Todo es muy sencillo. Entonces, hemos resuelto la sustitución de imágenes, pasemos a la siguiente tarea.
Limitar el área de arrastre para la función de arrastrar y soltarHay un problema al limitar el área de arrastre. El punto es que si sueltas una pieza fuera del tablero, el evento de caída no ocurrirá, ya que el usuario soltó el objeto en un espacio vacío y no hay nada con lo que el objeto pueda interactuar. Como resultado, la figura no volverá a su estado original y permanecerá oculta para siempre. Pasé mucho tiempo leyendo la documentación, pero todavía no pude encontrar una manera de limitar el área de arrastrar y soltar de los objetos. La idea llegó de repente. No necesito limitar el área en absoluto, necesito saber si el usuario liberó la forma correctamente o no.
Determinar la liberación correcta
Encontré respuestas a mis preguntas en la sección "manejo de eventos de finalización de arrastre" en el sitio web de desarrolladores de Android. Aquí hay algunos puntos clave:
Entonces necesito interceptar el evento ACTION_DRAG_ENDED y llamar al método getResult. Si devuelve falso, entonces el usuario ha arrastrado la pieza fuera del tablero y necesito configurar ImageView en modo visible.
@ Anular booleano público onDrag(Ver vista, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; Ver dragView= (Ver) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containsDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( contieneDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE); ) ) else if (dragAction= = DragEvent. ACTION_DROP& amp;& amp; contieneDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView); dragView. setVisibility(View. VISIBLE) ; ) devuelve verdadero; ) booleano privado dropEventNotHandled(DragEvent dragEvent) ( return ! dragEvent. getResult( ) ; )Ahora el usuario puede soltar la figura en cualquier lugar y no pasará nada malo.
Definición de movimientos válidosLa última parte del artículo está dedicada a comprobar la validez del movimiento que el usuario intenta realizar. Antes de discutir este tema en detalle, haré una breve nota explicando la estructura de mi solicitud. El tablero de ajedrez se representa como TableLayout, y cada celda es hija de LinearLayout y tiene un OnDragListener.
Además, cada OnDragListener hace referencia a un objeto "mediador", que se encarga de la interacción de los objetos del juego y recuerda la posición de la celda actual.
Cuando el usuario arrastra una pieza sobre una celda, son posibles las siguientes acciones:
A continuación se muestra el código que implementa la lógica descrita.
@ Anular booleano público onDrag(Ver vista, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; Ver dragView= (Ver) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( containsDragable= false ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( contieneDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE); ) ) else if (dragAction= = DragEvent.ACTION_DROP& amp;& amp; contieneDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView); dragView. setVisibility(View. VISIBLE); ) devuelve verdadero; )Como puede ver, independientemente de si el movimiento es válido o no, ImageView se transfiere al estado visible. Quería que el usuario viera la forma moverse. Mencioné anteriormente que una celda es hija de LayoutView. Esto se hace para que sea más fácil mover ImageView de una celda a otra. A continuación se muestra el código del método checkForValidMove, que muestra cómo se mueve ImageView.
checkForValidMove vacío privado (vista ChessBoardSquareLayoutView, vista dragView) ( if (mediator. isValidMove(view) ) ( propietario de ViewGroup = (ViewGroup) dragView. getParent() ; propietario. removeView(dragView); view. addView(dragView); view. setGravity (Gravity. CENTER); ver. showAsLanded(); mediador. handleMove(ver); ) )Espero que este artículo te ayude a la hora de desarrollar tus propios proyectos.
