Explication détaillée du composant de tri par glisser-déposer de React Dragact

Regardons d'abord une image :

Typescript (TS)

J'utilise TS pour le développement récemment, la pratique Ts d'Eggjs est également à moitié écrite. Ce truc est vraiment toxique car il peut vous rendre accro.

Déplacez un projet vers TS à volonté. Grâce à la puissante détection de type statique, vous pouvez facilement trouver un tas d'erreurs de logique et de limites. Après quelques refactorisations, le code s'est soudainement senti rafraîchi et mon cuir chevelu a retrouvé sa vitalité !

Par conséquent, ce composant est entièrement développé en utilisant Typescript, ce qui le rend plus pratique et plus rapide pour les amis qui utilisent TS. Deuxièmement, si vous souhaitez utiliser Javascript pour le développement, il n’y a aucun problème.

Quelques réflexions sur la fabrication de la roue

Tout d'abord, notre exigence est que les utilisateurs puissent facilement ajuster les positions des différents cadrans sur le tableau de bord en arrière-plan.

Photo de : https://github.com/yezihaohao/react-admin

Une interface comme celle-ci, nous avons besoin des composants l'intérieur peut être déplacé de différentes manières ( Je dois dire, putain, j'ai déjà préparé le système backend et vous pouvez simplement l'utiliser. Si vous faites glisser votre sœur, vous ne laisserez pas les gens passer un bon moment. Nuit dîner. )

Donc tout d'abord, nous devons considérer quelques points :

• La pile technologique est React

• Tous les widgets dans la plage fixe (Conteneur) ne peuvent pas dépasser cette plage.

• La taille de chaque widget peut être définie et divisée de haut en bas selon une certaine marge.

• Tous les composants du conteneur ne doivent pas se chevaucher et doivent être automatiquement triés

• Certains composants doivent être définis de manière statique, c'est-à-dire qu'ils y sont corrigés et n'est affecté par aucune modification de la mise en page.

• Les téléphones portables peuvent également le faire fonctionner

Commencer

Grâce à avoir écrit des composants glisser-déposer auparavant, j'ai évité Beaucoup de piège, j'ai également écrit sur ce composant. Ses principales caractéristiques sont :

• Composant React

• Système de grille de mise en page automatique

• Peut également être utilisé sur les téléphones mobiles

• Hautement adaptatif

• Composant statique (démo en direct (adresse d'aperçu) )

• Composants déplaçables (Démo en direct (adresse d'aperçu))

Enfin terminé cela le matin du deuxième jour du Nouvel An lunaire Les composants peuvent essentiellement répondre aux besoins des clients, mais il existe encore quelques TODO LIST :

• Mode d'échange horizontal, le déplacement actuel n'est pas

• Dynamique de l'utilisateur Redimensionner chaque widget ressemble à une fenêtre Windows

• Poignée de déplacement du widget

• Réactivité du support

• Support ssr , rendu serveur

Comment démarrer ?

npm install --save dragact

Écrivez un exemple

//index.js
import * as React from "react";
import * as ReactDOM from "react-dom";

import { Dragact } from 'dragact';
import './index.css'

ReactDOM.render(
    <Dragact
        col={8}
        width={800}
        margin={[5, 5]}
        rowHeight={40}
        className=&#39;plant-layout&#39;
    >
        <p key={0} data-set={{ GridX: 0, GridY: 0, w: 4, h: 2 }} className=&#39;layout-child&#39;>0</p>
        <p key={1} data-set={{ GridX: 0, GridY: 0, w: 1, h: 2 }} className=&#39;layout-child&#39;>1</p>
        <p key={2} data-set={{ GridX: 0, GridY: 0, w: 3, h: 2 }} className=&#39;layout-child&#39;>2</p>
    </Dragact>,
    document.getElementById('root')
);

Ajoutez du CSS

/** index.css */
.plant-layout {
    border: 1px solid black;
}
.layout-child {
    height: 100%;
    background: #ef4;
    display: flex;
    justify-content: center;
    align-items: center;
}

Vous voulez une nouvelle fonctionnalité ou fonctionnalité ?

Si vous souhaitez ajouter de nouvelles fonctionnalités ou si vous avez de bonnes idées, veuillez ouvrir un numéro et faites-le moi savoir, merci !
Si vous avez lu le code source et ajouté quelques éléments géniaux

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!