Comment mettre en œuvre le “glisser-déposer” de l'interface utilisateur sur le site web?
Je me demandais quelle serait la meilleure façon de mettre en œuvre une sorte de "glisser déposer" de l'interface utilisateur?
Ce que je veux dire, c'est qu'il y aurait une page principale et cliquez sur chaque lien (par exemple. d'autres sections comme sujet, galerie, formulaire de contact) permettrait d'ouvrir une nouvelle drag n drop élément en haut de la page principale. Quelque chose comme bureau de windows où vous pouvez déplacer votre application windows autour de l'écran.
Serait-il préférable de faire appel à différentes fonctions avec AJAX lorsque le lien est cliqué? Comme la "galerie" lien pourrait appeler la galerie de fonction et de récupérer généré dynamiquement le contenu de cette "fenêtre" avec appel AJAX et puis il suffit de charger ce genre de choses sur certains div?
Ou un autre type d'approche qui convient le mieux pour cela?
J'espère que j'ai été capable d'expliquer cela de façon suffisamment claire. Je suis à la recherche d'un bon "modèle de conception" pour le mettre en œuvre. Toutes les suggestions sont les bienvenus! 🙂
Nono, je suis seulement à la recherche de quelques suggestions sur la façon de mettre en œuvre ce type de conception. Dois-je appeler des fonctions avec l'ajax et remplir le Mdn éléments de cette façon, ou dois-je aller avec une autre façon?
OriginalL'auteur Nikkeloodeni | 2010-04-20
Vous devez vous connecter pour publier un commentaire.
J'ai d'abord vous suggérons d'utiliser jQuery pour créer votre faire glisser et déposer
http://jqueryui.com/demos/draggable/
Je suis sûr que vous pouvez trouver beaucoup de faire glisser et déposer des exemples pour jQuery
J'ai utiliser yahoo bibliothèque javascript glisser-déposer - avant d'apprendre jQuery.
Voici quelques exemple sur yahoo.
http://developer.yahoo.com/yui/examples/dragdrop/dd-basic.html
Espérons que cette aide pour démarrer.
Il y a aussi tous les prêts existants presque complète des systèmes d'interface utilisateur sur internet.
Voici un http://www.smartclient.com/, mais il y a plus....
https://github.com/mui/mochaui
http://www.extjs.com/
aussi c'est une question qui peut vous donner des idées Qu'est ce qu'un bon de Très Haut niveau framework d'INTERFACE pour le JavaScript?
oui c'est mieux d'avoir une seule page, mais il est un peu plus difficile à exécuter le JavaScript après l'ajax mises à jour, comment jamais, vous pouvez le faire. Vérifiez également la smartclient.com pour les idées 🙂 et recherchez d'autres javascript os.
Bon lien, j'ai utiliser beaucoup de Mdn dans un portail à l'aide ExtJs.
OriginalL'auteur Aristos
HTML 5.0 offre de glisser et de déposer construit dans, mais vous aurez probablement besoin d'utiliser Déplaçable et Droppable de la bibliothèque jQuery UI.
OriginalL'auteur James Westgate
Le Dojo Toolkit fournit un moyen facile de définir le Mdn éléments.
Voir l'exemple vivant. Plus sur Dojo du Mdn dans DojoCampus.
OriginalL'auteur Török Gábor
La manière que vous décrivez semble être une bonne façon de mettre en œuvre ce oui. Je ne sais pas si il y a des approches différentes. J'ai mis en place quelque chose de similaire sur un site précédent (www.ponyhof.be), bien qu'il n'y a pas droppable mise en œuvre. Vous êtes les bienvenus pour prendre un coup d'oeil au code, il n'est pas vraiment une beauté, mais il fonctionne.
Sur ce site que j'ai fait une page principale avec un vide panneau d'information (déplaçable) où j'ai chargé info via Ajax.
Depuis que j'ai fait ce site, j'ai appris des choses qui aurait facilité la mise en œuvre (donc, maintenant, je le ferais différemment). De plus précis, je voudrais faire un meilleur usage de le jQuery, le délégué de la méthode qui peut automatiquement associer des actions à des liens qui sont chargés via ajax (sur ponyhof.être que j'ai joint à eux après ajaxComplete événement a été déclenché).
Mais en général, je pense que ce que vous proposez semble une bonne façon de construire une interface et je n'ai pas trouver quelque chose de mieux.
OriginalL'auteur metatron
Je vous recommande d'utiliser html5 drag and drop, parce que même tho son une terrible api, il ouvre beaucoup de possibilités, comme le déménagement de votre "windows" entre les onglets du navigateur par exemple. J'ai récemment écrit un faible niveau de glisser-déposer le module qui fait abstraction de la presque totalité de l'étrange étrangeté de l'html5 drag-and-drop de l'api. Tout vous devez faire est de créer une certaine position absolue "windows" avec certains de glisser la poignée et faire quelque chose comme ceci:
Découvrez le module ici: https://github.com/fresheneesz/drip-drop
OriginalL'auteur B T