Comment puis-je créer un élément de page Web triable, modifiable, additif et amovible?

Question

Je crée une interface d'application Web qui permettra aux utilisateurs de construire des phrases en cliquant sur des mots/phrases. Chaque mot de phrase sera contenu dans son propre élément de page, par exemple. un <div>. Ainsi, la classe div devrait permettre:

• glisser dans un ordre différent par rapport aux autres divs/mots (par exemple le tri.)
• un X (uniquement visible lors du survol) dans le coin supérieur droit de sa boîte pour le supprimer complètement après avoir cliqué sur
• changement de police/texte sur clic actions
• être inséré dans la page lorsque l'utilisateur souhaite ajouter un autre mot

Par exemple, imaginez c'est la page (marque de citation s représentent un élément):

"Salut, mon nom est" [Textbox] "Je travaille à ..." "et je suis né en" [Combobox]

L'expression en italique est 'inactif' et ne fait pas partie de la phrase, mais si l'utilisateur l'a cliqué alors il deviendrait "je travaille à" [Textbox] et une nouvelle div serait ajoutée par exemple. "Et aussi à ..." pour permettre une nouvelle expansion. Les phrases en gras auraient un bouton de fermeture/action cliquable pour se débarrasser d'eux ou les rendre inactifs à nouveau. En outre, ils seraient déplaçables pour changer l'ordre. Comme vous pouvez le voir, j'aurais aussi besoin d'insérer dynamiquement de nouvelles zones de texte et comboboxes pour accommoder plus de phrases nécessitant une entrée.

Quelqu'un pourrait-il m'expliquer brièvement ce que je dois faire? J'ai vu des éléments de liste triables dans JQuery, par exemple. http://jsfiddle.net/ctrlfrk/A4K4t/ qui est un début. Aurais-je juste besoin d'ajouter du code JavaScript et CSS de base? Ou devrais-je utiliser des scripts côté serveur pour ajouter de manière dynamique plus de contenu à la page? Pour résumer, j'ai besoin de la div pour changer de police/texte en cliquant, avoir un bouton de survol, supprimer et être inséré sur de simples événements de clic, et être triable en faisant glisser. J'ai aussi besoin de comboboxes/textboxes à ajouter/supprimer en parallèle.

Tous les conseils seraient grandement appréciés.

Answer 1

Vous n'avez pas besoin du serveur pour le nouveau contenu à moins qu'il ne soit stocké ou généré là-bas. N'ayant pas fait cette chose exacte avant que je ne vois aucun grand schéma à implémenter, je voudrais ajouter les fonctionnalités de façon incrémentielle jusqu'à ce que vous ayez besoin d'aller. Vous devrez peut-être refactoriser les choses un peu en cours de route, mais je n'ai probablement pas à vous le dire. ;)

Une chose que vous devrez faire lorsque vous ajouterez ou supprimerez des éléments est de relier les fonctions de jQuery, il ne suffira pas de les appeler lors du chargement du document. Mettez-les dans une fonction et appelez-le chaque fois que vous ajoutez ou supprimez un élément. En ce qui concerne votre description du comportement de l'interface utilisateur, vous dites que les éléments inactifs peuvent être déplacés et qu'ils peuvent être activés en cliquant dessus. Vous pouvez le faire (juste voir si la chose a été traînée ou pas sur le mouseup pour savoir si c'était par glisser ou un clic) mais ce n'est peut-être pas le meilleur choix de conception de l'interface utilisateur, IMO. Ce ne serait pas la pire chose au monde, mais je trouve ça un peu frustrant quand la mauvaise chose arrive quand j'essaie de faire quelque chose.Bien sûr, mettre en œuvre et voir par vous-même est probablement le meilleur.

Answer 2

Tri: Je mettrait en œuvre les phrases dans une liste non ordonnée (ul) ce qui le rend aussi simple que

$("#ulId").sortable(); 

Vous pouvez faire des articles ul/li pile à côté de l'autre d'une manière similaire à la façon dont vous faites des menus de navigation horizontaux à partir d'éléments ul.

Un bouton destrunction: Il suffit d'utiliser un modèle li similaire à ce

<li id="text1Wrapper"> 
    <span id="text1" 
    onmouseover="javascript:$('text1Remove').fadeIn();" 
    onmouseout="javascript:$('text1Remove').fadeOut();" 
    onclick="javascript:$('text1Content'). 
     replaceWith(
     $(document.createElement('input')) 
      .attr('type','text') 
      .val($('text1Content').text()) 
     );"> 
     <span id="text1Content">Text Here</span> 
     <img id="text1Remove" 
     style="display: none;" 
     src="./x.jpg" alt="Remove" 
     onclick="javascript:$(this).parent().remove();" 
     /> 
    </span> 
</li> 

Une description rapide: La souris span over indique jquery à disparaître dans le bouton Supprimer (donc quand vous passez la souris, le bouton Supprimer devient disponible).

La souris span sur l'événement indique jquery pour faire disparaître le bouton supprimer quand il est plus nécessaire (donc lorsque vous déplacez la souris du li, le bouton de suppression ne soit plus visible)

Le onclick de la durée remplace l'intervalle par une zone de texte contenant le contenu de l'intervalle. Je vais laisser les "enregistrer les changements" comme un exercice pour le lecteur, car il est essentiellement le même mais à l'envers.

Le style de tag Img est affiché: aucun pour le masquer initialement. C'est essentiellement le produit final d'un fadeOut() mais sans le fondu. L'événement on click du bouton remove obtient le parent (le li) et le supprime, ainsi que tous les enfants de la dom.

Notez que les événements ne sont mis ici que parce qu'il semblait logique de l'expliquer. Tous les événements dans le tag SPAN externe sont inutiles, car ils seront tous remplacés lorsque nous clonerons le nœud dans la section suivante.

Insertion dans la page: Tout ce que vous avez à faire est maintenant

var cloneLi = $('#text1Wrapper').clone(); 
cloneLi.attr('id', 'text2Wrapper'); 
var cloneSpan = cloneLi.children('#text1').attr('id', 'text2'); 
var cloneContent = cloneSpan.children('#text1Content').attr('id', 'text2Content'); 
var cloneRemove = cloneSpan.children('#text1Remove').attr('id', 'text2Remove'); 

Vous aurez alors besoin de changer les fonctions mouseover, mouseout et onclick de la travée externe en utilisant des événements jquery:

cloneSpan.mouseover(function(e) { 
    // Insert functionality from template here 
}); 
cloneSpan.mouseout(function(e) { 
    // Insert functionality from template here 
}); 
cloneSpan.click(function(e) { 
    // Insert functionality from template here 
});