Personnalisation de cibles de dépôt sur la page

En mode édition, le portail affiche des cibles de dépôt pour toutes les positions où un portlet peut être ajouté à la page. Dans le thème par défaut, ces cibles sont masquées, excepté si un élément est déplacé sur le conteneur.

Le marquage des cibles de dépôt est défini dans un fichier nommé DropTarget.html qui se trouve dans le dossier des habillages en cours, dans WebDAV. Par exemple : fs-type1/themes/YourThemeName/skins/Hidden/DropTarget.html

Le marquage dans DropTarget.html est toujours entouré par une balise <div>, représentant le composant de contrôle de cible de dépôt. A l'intérieur de la balise <div> se trouve une balise d'ancrage qui fait référence au composant control-component, à la position où un élément déposé est inséré. Par exemple:

<div class="portlet-window component-control portal-drop-target id-ID_of_control_component_at_insert_position">
<a class="portlet-window-ref" href="#ID_of_control_component_at_insert_position"></a>

        <DropTarget.html>

</div>

Les styles des classes CSS se trouvent dans le fichier default_edit.css dans fs-type1/themes/YourThemeName/css/default/default_edit.css.

Le portail injecte également les classes CSS suivantes lors d'une opération de type glisser :
  • Lorsqu'un objet fait l'objet d'un glissement vers un conteneur de colonne ou de ligne, celui-ci obtient la classe CSS ibmDndDropZonesActive.
  • Lorsqu'un objet fait l'objet d'un glissement vers une cible de dépôt, celle-ci obtient la classe CSS ibmDndDropZoneOver.
La liste suivante contient des exemples de sélecteur de feuille de style en cascade et l'action qui en résulte :
  • div.ibmDndDropZonesActive div.portal-drop-target permet de sélectionner une cible de dépôt au sein du conteneur actif, qu'il s'agisse d'une ligne ou d'une colonne.
  • div.ibmDndDropZonesActive div.portal-drop-target.ibmDndDropZoneOver permet de sélectionner une cible de dépôt vers laquelle un objet fait l'objet d'un glissement.

Un développeur de thème peut personnaliser les zones de dépôt en éditant le fichier default_edit.css ou en modifiant le fichier DropTarget.html, ou les deux.

Firefox ne prend pas actuellement en charge la fonction de défilement automatique lors d'une opération de type glisser-déposer. Des plug-ins sont disponibles pour ajouter cette prise en charge à Firefox.