Quels FrameWorks pour une application Drag&Drop ?

Version imprimable

01/08/2023, 15h19
Yobeco

1 pièce(s) jointe(s)

Quels FrameWorks pour une application Drag&Drop ?

Salut à vous.

Je souhaite créer une application qui ressemblerait à cette image (maquette dessinée avec Libre Office). Il faut qu'elle fonctionne dans n'importe quel navigateur sur ordinateur fixe ou tablette (Android ou OSX). Il faut qu'elle puisse utiliser une synthèse vocale (type gTTS en python) et envoyer des requêtes à l'API d'une IA comme Bard ou ChatGPT.
La partie avec des onglets est une bibliothèque d'images, classées en 10 thèmes, et 4 catégories grammaticales.
L'enfant fera un glisser-déposer des images de la bibliothèque vers la ligne d'images au dessous (en jaune) et pourra cliquer sur un bouton pour écouter (Synthèse vocale) la phrase correspondante la plus probable (Générée avec l'IA spécialiste en langage naturel).

Il semble que JavaScript soit le langage le mieux adapté pour développer ce type d'application. Confirmez-vous ?
Je sais déjà développer (humblement) en Python et en C Arduino et j'ai des notions d'HTLM.

Si le JavaScript vous parait adapté, quels FrameWorks seraient les mieux adaptés ?

Merci à vous !

Pièce jointe 642059
Pièce jointe 642032
01/08/2023, 15h34
SpaceFrog

Personnellement j'utiliserai JQuery, mais ce n'est qu'un avis personnel ...
01/08/2023, 15h56
Yobeco

Quelles autres options existent ?
Comme ça je pourrai comparer et me faire un avis.

Ce dont j'ai besoin, c'est de quelque-chose de simple et fonctionnel où je puisse trouver de la doc et de l'aide. Le Design est secondaire.

Merci :-)
01/08/2023, 16h02
SpaceFrog

https://www.google.com/search?q=java...hrome&ie=UTF-8
01/08/2023, 19h42
melka one

jour

les navigateurs fournissent nativement une api de drag & drop

https://developer.mozilla.org/fr/doc...g_and_Drop_API

Pour un Drag&Drop avec portabilité souris ou tactile, tu utilises tout simplement les événements pointer. Pas besoin de bibliothèque pour ça ( ou DragEvent comme cité précédemment mais je ne connais pas le comportement en tactile vu qu'il hérite de mouseEvent...) :
Un essai sur une image avec pointer :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>drag&drop</title>
    <style>
        body{
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #container{
            display: grid;
            place-items: center;
            height: 100vh;
        }
    </style>
</head>
<body>
 <div id="container">
    <img src="picture.jpg" id="image">
 </div>
    <script>
        let im= document.getElementById('image');
        let clientX0,
            clientY0,
            ClientX,
            clientY,
            x0=0,
            y0=0,
            x,
            y;
           
 
        function handlePointerMove(e){
                e.preventDefault();
                clientX = e.clientX;
                clientY = e.clientY;
                x=clientX-clientX0+x0;
                y=clientY-clientY0+y0;
                e.currentTarget.style.transform = `translate(${x}px, ${y}px)`;     
        }
                
        function handlePointerUp(e){
            e.preventDefault();
            im.style.cursor='grab';
            im.removeEventListener('pointermove',handlePointerMove);
            window.removeEventListener('pointerup',handlePointerUp);
            x0=x;
            y0=y;
        }
                
        function handlePointerDown(e){
            let target=e.currentTarget;
            e.preventDefault();
            target.style.cursor='grabbing';
            clientX0 = e.clientX;
            clientY0 = e.clientY;
 
            target.addEventListener('pointermove',handlePointerMove); 
            window.addEventListener('pointerup',handlePointerUp); 
        }
 
        im.addEventListener('pointerdown',handlePointerDown);
    </script>
</body>
</html>