Usando arrastrar y soltar en sitios web?

Question

Como ahora me gustaría desarrollar mejores webapps, luego los php básicos y los javascript que actualmente creo, me gustaría saber cómo los desarrolladores web crean algunos de los sitios web increíbles que he utilizado en los últimos años.

Por ejemplo, en algunos de los sitios web que visito tienen la capacidad de arrastrar y soltar elementos de una paleta en la página web. Estoy pensando principalmente en algunas de las herramientas de diagramación en línea que he visto. ¿Cómo lo hacen porque estoy desconcertado actualmente?

Me gustaría comenzar a crear este tipo de sitios web y actualmente no tengo ni idea de cómo proceder. Primero quiero crear algunos sitios web de pequeños probadores que permitan un uso muy básico de arrastrar y soltar.

Si alguien pudiera indicarme las direcciones correctas en términos de enlaces a tutoriales o bibliotecas que tienen esta característica, entonces estaría muy agradecido.

Saludos.

Answer 1

En cuanto a un simple arrastre y suelta, puede hacer algo como lo que dijo con una paleta y un cuadro de diálogo que cambia de color en función de la caída.

Recomendaría el marco jQuery, ya que es muy fácil de usar y tiene un gran API.

Los pasos para la prueba en sí son bastante simple:

tienen una paleta con los colores: [ ][ ][ ][ ][ ] Estas celdas de la tabla pueden ser (<td>) que puede hacer clic en y 'arrastre'.

Puede hacer tablas y cuando hace clic en una de las tablas, utiliza jQuery para obtener el color de fondo. Cuando haga clic en <td>, asigne el color a una variable.

Puede crear un <div> semitransparente que sigue al mouse mientras lo arrastra.

Establecer un oyente mouseup en el objetivo <div> (el que iba a cambiar de color) y tienen jQuery establece el fondo de la <div> al color en la variable.

Editar: Habrá un pequeño problema con la 'selección de texto' cuando arrastre algo. Una solución se puede encontrar aquí: How to disable text selection highlighting using CSS?

Answer 2

jQuery es fácil de aprender (pero no estoy 100% seguro de que lo haga). Personalmente me gusta MochiKit, que tiene una excelente funcionalidad de arrastrar y soltar, y Dojo es muy bueno también (y tiene algunos artilugios de lujo).

Answer 3

se puede hacer usando la interfaz de usuario jQuery

Draggable

Droppable

Answer 4

La mejor, más a prueba de futuro (en términos de la inmunidad a los cambios del navegador y actualizaciones) forma de implementar arrastrar/soltar funcionalidad es utilizar tecnología de verdadero cliente enriquecido (RIA) como Adobe Flex, Silverlight o JavaFX.

Answer 5

Creo que debería considerar el desarrollo en GWT que es básicamente un envoltorio basado en Java para Javascript.Tiene una gran cantidad de compatibilidad con la comunidad y un soporte completo para arrastrar y soltar está disponible en la forma de una biblioteca: http://code.google.com/p/gwt-dnd/

Como GWT está codificando en Java, no es realmente un territorio nuevo en el que aventurarse sino el conocimiento de Javascript. css, html va un largo camino en la construcción de una robusta aplicación GWT. Además, le permite depurar su código en eclipse al igual que el código Java.