Glisser-déposer avec le composant triable KendoReact

Les interfaces glisser-déposer permettent des interactions utilisateur faciles. Découvrez comment le composant KendoReact Sortable vous permet d’ajouter cette fonction en un clin d’œil.

Dans les applications Web modernes, une manière intuitive de gérer l’interaction des utilisateurs consiste à utiliser des interfaces glisser-déposer. Le glisser-déposer offre aux utilisateurs une méthode tactile et visuellement intuitive pour gérer des éléments, réorganiser le contenu ou saisir des données de manière rapide et efficace.

Le progrès KendoRéagir la bibliothèque offre une polyvalence Triable composant qui fournit une fonctionnalité glisser-déposer triable pour les éléments d’une liste.

Dans cet article, nous explorerons l’implémentation du composant KendoReact Sortable à l’aide de trois exemples distincts : une implémentation générale, une version avec des éléments désactivés et une version qui affiche comment le composant émet des détails pour de nombreux événements de glisser-déposer différents.

Le composant triable KendoReact

Le composant KendoReact Sortable, distribué via le kendo-react-triable Le package npm permet de réorganiser les éléments d’une collection par glisser-déposer. Ce composant est particulièrement utile pour des tâches telles que la réorganisation des listes, la gestion d’un ensemble de cartes interactives ou même la création de fonctionnalités de priorisation dans les applications de gestion de tâches.

Nous commencerons par configurer une liste triable de base similaire à la exemple montré dans la documentation de KendoReact. Nous allons commencer par importer les modules nécessaires et définir quelques styles initiaux pour nos articles :

import { Sortable } from "@progress/kendo-react-sortable";

const getBaseItemStyle = (isActive) => ({
  height: 70,
  lineHeight: "68px",
  fontSize: "16px",
  textAlign: "center",
  outline: "none",
  border: "1px solid",
  cursor: "move",
  display: "block",
  width: 200,
  background: isActive ? "#27aceb" : "#bfe7f9",
  color: isActive ? "#fff" : "#1494d0",
  borderColor: isActive ? "#27aceb" : "#fff",
});

const SortableItem = (props) => {
  const { attributes, dataItem, forwardRef, isActive, style } = props;
  return (
    <div
      ref={forwardRef}
      {...attributes}
      style={{
        ...getBaseItemStyle(isActive),
        ...style,
      }}
    >
      {dataItem.text}
    </div>
  );
};

const App = () => {
  
};

Le SortableItem Le composant représente un composant d’élément unique destiné à être interactif et visuellement indicatif de sa capacité à être réorganisé.

Dans notre App composant, nous initialiserons un état avec un tableau d’objets item, chacun contenant un id et text. Cet état gérera les éléments affichés dans la liste triable. Nous aurons le App composant rend le Sortable composant, en le configurant pour utiliser les données d’état pour ses opérations. Le itemUI prop spécifie le SortableItem composant pour restituer chaque élément, afin qu’ils soient affichés selon les styles et comportements définis.

import { Sortable } from "@progress/kendo-react-sortable";

const getBaseItemStyle = (isActive) => ({
  
});

const SortableItem = (props) => {
  
};

const App = () => {
  const [data, setData] = React.useState([
    {
      id: 1,
      text: "item1",
    },
    {
      id: 2,
      text: "item2",
    },
    {
      id: 3,
      text: "item3",
    },
  ]);

  return (
    <div className="container-fluid">
      <Sortable idField={"id"} data={data} itemUI={SortableItem} />
    </div>
  );
};

A ce moment, le Sortable Le composant affichera une liste d’éléments basée sur les données d’état.

Bien que notre liste d’éléments soit en cours de rendu, la fonctionnalité de déplacement ne fonctionnera pas tant que nous n’aurons pas ajouté un onDragOver soutenir le Sortable composant qui met à jour les données d’état du composant chaque fois qu’un glissement est lancé et terminé.

import { Sortable } from "@progress/kendo-react-sortable";

const getBaseItemStyle = (isActive) => ({
  
});

const SortableItem = (props) => {
  
};

const App = () => {
  const [data, setData] = React.useState([
    
  ]);

  const onDragOver = (event) => {
    setData(event.newState);
  };

  return (
    <div className="container-fluid">
      <Sortable
        
        onDragOver={onDragOver}
      />
    </div>
  );
};

Désormais, lorsque des éléments sont glissés les uns sur les autres, le onDragOver L’événement met à jour l’état pour refléter le nouvel ordre, permettant ainsi une fonctionnalité complète de glisser-déposer !

Désactiver des éléments

Le composant KendoReact Sortable permet de désactiver sélectivement des éléments dans une liste triable en utilisant le disabledField soutenir. Cet accessoire accepte le nom d’un champ dans l’objet élément, qui détermine si l’élément doit être désactivé. Pour désactiver un élément, nous pouvons définir le nom du champ (dans notre cas, disabled) à true pour certains éléments du tableau de données. Cela marque l’élément comme non interactif, ce qui signifie qu’il ne peut pas être déplacé mais reste visible dans la liste.

import { Sortable } from "@progress/kendo-react-sortable";

const getBaseItemStyle = (isActive) => ({
  
});

const SortableItem = (props) => {
  
};

const App = () => {
  const [data, setData] = React.useState([
    
    {
      id: 3,
      text: "item3",
      disabled: true,
    },
  ]);

  return (
    <div className="container-fluid">
      <Sortable
        
        disabledField={"disabled"}
      />
    </div>
  );
};

Pour distinguer visuellement les éléments désactivés de ceux qui sont interactifs, nous pouvons modifier le getBaseItemStyle() fonction pour incorporer des styles qui signifient l’état désactivé d’un élément. Ces styles incluraient des modifications du type de curseur, une opacité réduite et la désactivation des événements de pointeur pour empêcher toute interaction.

import { Sortable } from "@progress/kendo-react-sortable";

const getBaseItemStyle = (isDisabled, isActive) => ({
  
  cursor: isDisabled ? "default" : "move",
  opacity: isDisabled ? 0.6 : 1.0,
  pointerEvents: isDisabled ? "none" : "initial",
  boxShadow: isDisabled ? "none" : "initial",
  
});
const SortableItem = (props) => {
  const { isDisabled, attributes, dataItem, forwardRef, isActive, style } =
    props;
  return (
    <div
      ref={forwardRef}
      {...attributes}
      style={{
        ...getBaseItemStyle(isDisabled, isActive),
        ...style,
      }}
    >
      {dataItem.text}
    </div>
  );
};

const App = () => {
  
};

Avec ces modifications, nous avons effectivement configuré un élément, en particulier l’élément avec le texte item3pour être désactivé.

Événements

Le KendoReact Sortable Le composant génère une variété d’événements que nous pouvons gérer, ce qui nous permet d’adapter le comportement du composant à nos besoins spécifiques. Pour voir cela en action, nous pouvons enregistrer le event objet qui est émis vers la console lorsque le onDragOver() la fonction est déclenchée.

import { Sortable } from "@progress/kendo-react-sortable";

const getBaseItemStyle = (isDisabled, isActive) => ({
  
});

const SortableItem = (props) => {
  
};

const App = () => {
  const [data, setData] = React.useState([
    
  ]);

  const onDragOver = (event) => {
    console.log("onDragOver", event);
    setData(event.newState);
  };

  return (
    <div className="container-fluid">
      <Sortable
        
        onDragOver={onDragOver}
      />
    </div>
  );
};

Lorsque vous faites glisser des éléments dans la liste, nous pourrons voir des informations sur la position d’index précédente et nouvelle de l’élément, ainsi que sur la forme réorganisée des données.

onDragOver() n’est pas le seul événement déclenché. Le Sortable Le composant répond également à des événements tels que onDragStart() et onDragEnd().

import { Sortable } from "@progress/kendo-react-sortable";

const getBaseItemStyle = (isDisabled, isActive) => ({
  
});

const SortableItem = (props) => {
  
};

const App = () => {
  const [data, setData] = React.useState([
    
  ]);

  const onDragStart = (event) => {
    console.log("onDragStart", event);
  };

  const onDragOver = (event) => {
    console.log("onDragOver", event);
    setData(event.newState);
  };

  const onDragEnd = (event) => {
    console.log("onDragEnd", event);
  };

  return (
    <div className="container-fluid">
      <Sortable
        
        onDragStart={onDragStart}
        onDragOver={onDragOver}
        onDragEnd={onDragEnd}
      />
    </div>
  );
};

Avec cette configuration, nous pouvons surveiller toutes les phases du processus de glisser-déposer, fournissant ainsi un aperçu des interactions des utilisateurs et la possibilité d’ajuster les comportements de manière dynamique pendant le démarrage, pendant et après l’opération de glisser.

Conclure

En conclusion, le composant KendoReact Sortable offre aux développeurs un outil puissant pour améliorer les applications React avec une fonctionnalité intuitive de glisser-déposer. Que vous ayez besoin de réorganiser des listes, de gérer des cartes interactives ou d’implémenter des fonctionnalités de priorisation dans vos applications, ce composant offre la flexibilité et les options de personnalisation nécessaires pour répondre à ces exigences de glisser-déposer.

Pour plus de détails et des configurations avancées (comme éléments imbriqués!), assurez-vous de consulter le site officiel documentation des composants.

Et si vous ne l’avez pas déjà fait, essayez KendoReact gratuitement pendant 30 jours.

Essayez maintenant