Utiliser Smooth-dnd sans aucun FrameWorks

1 pièce(s) jointe(s)

Bonjour

Je suis un débutant en JavaScript.
Je suis également enseignant en école primaire et maternelle. Je développe une application pour des petits élèves mais aussi pour des enfants handicapés (autisme profond). Je l'écris en HTML / CSS / JavaScript.
Les onglets horizontaux, verticaux et les vignettes sont générés à partir de fichiers JSON.
Je veux maintenant permettre le glisser-déposer les vignettes vers la division jaune. Si j'utilise l'API du DOM pour les événements de glisser-déposer (souris et écrans tactiles), la position des vignettes change instantanément. Et cela va visuellement perdre mes élèves.

Je veux donc essayer la bibliothèque kutlugsahin/smooth-dnd :
https://github.com/kutlugsahin/smooth-dnd
Mais je ne veux pas utiliser dans un frameworks (car smooth-dnd possède également des versions React, Vue et Angular...).
Il semble que oui, il est possible d'utiliser kutlugsahin/smooth-dnd directement en tant que bibliothèque JavaScript, mais je ne trouve aucun exemple de code d'exemple d'utilisation. Et honnêtement, sans exemple, juste avec la doc, je me sens perdu.

Est-ce que quelqu'un sait où trouver des exemples de codes smooth-dnd, comme ici pour React-smooth-dnd :
https://kutlugsahin.github.io/smooth-dnd-demo/

Pièce jointe 648864

Bonjour,

ici peut être
https://github.com/kutlugsahin/smooth-dnd-vanilla-demo

Bonne journée.

essai de smooth-dnd-vanilla-demo

J'ai pu télécharger le fichier smooth-dnd-vanilla-demo-master.zip
Je l'ai dézipé et dans le dossier obtenu, j'ai lancé un terminal pour lancer la commande "live-server".
La page index.html s'ouvre bien, mais seul le bouton "set options" apparaît dans une page blanche.
Cliquer dessus n'a aucun effet.

La console de FireFox m'indique une erreur à la première ligne :

Code:

import Container from '../../smooth-dnd/src/container';

Il ne semble pas trouver ce fichier...

Je télécharge smooth-dnd-master.zip que je dézippe dans le même dossier

Si je change la ligne par :

Code:

import Container from '../../smooth-dnd-master/src/container.ts';

ou

Code:

import Container from '../../smooth-dnd-master/src/container';

où se trouve le dossier source du master, il ne trouve toujours rien...

J'ai mis tout le contenu du dossier "smooth-dnd-vanilla-demo-master" dans le dossier "smooth-dnd-master" téléchargé ; donc "index.js" se trouve dans le même dossier que "container.ts".
J'essaye avec

Code:

import Container from 'container';

et

Code:

import Container from 'container.ts';

L'erreur reste...
Et pourquoi des fichiers TypeScript si c'est sensé être Vanilla ?
L'appli que j'essaye de développer est uniquement en JavaScript.

Je suis perdu :oops:
Quelqu'un pourrait me guider pour savoir comment utiliser smooth-dnd-vanilla ?

Bonjour,

avez vous exécutez npm i suivit de npm run build puis npm run start ?
Il me semble qu'il faut commencer par là.

Typescript ect, c'est du transpilage, ça se compile vers du js.
Donc, in fine, on trouvera toujours du code JS vanilla.

Ce repo sert à l'auteur de démonstration d'usage de sa lib dans un environnement vanilla.

Bonne journée.

Je télécharge le dossier du module :

git clone https://github.com/kutlugsahin/smoot...nilla-demo.git

Tout se passe bien. Je lance un terminal dans le dossier ainsi téléchargé.
Et je lance la ligne de commande

Code:

sudo npm install

mais j'obtiens des messages d'erreurs.

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
.../smooth-dnd-vanilla-demo$ sudo npm install
 
[sudo] Mot de passe de yonnel*: 
npm WARN old lockfile 
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile 
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile 
npm WARN deprecated is-accessor-descriptor@1.0.0: Please upgrade to v1.0.1
npm WARN deprecated is-data-descriptor@1.0.0: Please upgrade to v1.0.1
npm WARN deprecated mixin-deep@1.3.1: Critical bug fixed in v2.0.1, please upgrade to the latest version.
npm WARN deprecated is-data-descriptor@0.1.4: Please upgrade to v0.1.5
npm WARN deprecated is-accessor-descriptor@0.1.6: Please upgrade to v0.1.7
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated set-value@2.0.0: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated domelementtype@1.3.0: update to domelementtype@1.3.1
npm WARN deprecated ini@1.3.5: Please update to ini >=1.3.6 to avoid a prototype pollution issue
npm WARN deprecated flatten@1.0.2: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated set-value@0.4.3: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated is-accessor-descriptor@1.0.0: Please upgrade to v1.0.1
npm WARN deprecated is-accessor-descriptor@1.0.0: Please upgrade to v1.0.1
npm WARN deprecated is-accessor-descriptor@1.0.0: Please upgrade to v1.0.1
npm WARN deprecated is-data-descriptor@1.0.0: Please upgrade to v1.0.1
npm WARN deprecated is-data-descriptor@1.0.0: Please upgrade to v1.0.1
npm WARN deprecated is-data-descriptor@1.0.0: Please upgrade to v1.0.1
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated source-map-url@0.4.0: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated source-map-resolve@0.5.2: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated chokidar@2.0.4: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated buffer@4.9.1: This version of 'buffer' is out-of-date. You must update to v4.9.2 or newer
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated svgo@1.0.5: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated parcel-bundler@1.9.7: Parcel v1 is no longer maintained. Please migrate to v2, which is published under the 'parcel' package. See https://v2.parceljs.org/getting-started/migration for details.
npm WARN deprecated core-js@2.5.7: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 7
npm ERR! path /media/yonnel/SSD-1T/yonnel/Dropbox/01- DIY/25- HTML - CSS - JavaScript/03- JavaScript/Documentation JavaScript/Glisser déposer/smooth-dnd Essais/Installation smooth-dnd/smooth-dnd-vanilla-demo/node_modules/deasync
npm ERR! command failed
npm ERR! command sh -c node ./build.js
 
npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2024-01-31T21_31_06_017Z-debug-0.log

J'essaye alors de mettre à jour les dépendances avec la ligne de commande :

Code:

npm audit fix

Mais j'obtiens d'autres messages d'erreurs :

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
smooth-dnd-vanilla-demo$ npm audit fix
npm WARN old lockfile 
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile 
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile 
npm WARN audit fix chownr@1.0.1 node_modules/fsevents/node_modules/chownr
npm WARN audit fix chownr@1.0.1 is a bundled dependency of
npm WARN audit fix chownr@1.0.1 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix chownr@1.0.1 It cannot be fixed automatically.
npm WARN audit fix chownr@1.0.1 Check for updates to the fsevents package.
npm WARN audit fix ini@1.3.5 node_modules/fsevents/node_modules/ini
npm WARN audit fix ini@1.3.5 is a bundled dependency of
npm WARN audit fix ini@1.3.5 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix ini@1.3.5 It cannot be fixed automatically.
npm WARN audit fix ini@1.3.5 Check for updates to the fsevents package.
npm WARN audit fix minimatch@3.0.4 node_modules/fsevents/node_modules/minimatch
npm WARN audit fix minimatch@3.0.4 is a bundled dependency of
npm WARN audit fix minimatch@3.0.4 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix minimatch@3.0.4 It cannot be fixed automatically.
npm WARN audit fix minimatch@3.0.4 Check for updates to the fsevents package.
npm WARN audit fix minimist@1.2.0 node_modules/fsevents/node_modules/rc/node_modules/minimist
npm WARN audit fix minimist@1.2.0 is a bundled dependency of
npm WARN audit fix minimist@1.2.0 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix minimist@1.2.0 It cannot be fixed automatically.
npm WARN audit fix minimist@1.2.0 Check for updates to the fsevents package.
npm WARN audit fix minimist@0.0.8 node_modules/fsevents/node_modules/minimist
npm WARN audit fix minimist@0.0.8 is a bundled dependency of
npm WARN audit fix minimist@0.0.8 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix minimist@0.0.8 It cannot be fixed automatically.
npm WARN audit fix minimist@0.0.8 Check for updates to the fsevents package.
npm WARN audit fix semver@5.5.0 node_modules/fsevents/node_modules/semver
npm WARN audit fix semver@5.5.0 is a bundled dependency of
npm WARN audit fix semver@5.5.0 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix semver@5.5.0 It cannot be fixed automatically.
npm WARN audit fix semver@5.5.0 Check for updates to the fsevents package.
npm WARN audit fix tar@4.4.1 node_modules/fsevents/node_modules/tar
npm WARN audit fix tar@4.4.1 is a bundled dependency of
npm WARN audit fix tar@4.4.1 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix tar@4.4.1 It cannot be fixed automatically.
npm WARN audit fix tar@4.4.1 Check for updates to the fsevents package.
npm WARN audit fix rc@1.2.7 node_modules/fsevents/node_modules/rc
npm WARN audit fix rc@1.2.7 is a bundled dependency of
npm WARN audit fix rc@1.2.7 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix rc@1.2.7 It cannot be fixed automatically.
npm WARN audit fix rc@1.2.7 Check for updates to the fsevents package.
npm WARN audit fix glob@7.1.2 node_modules/fsevents/node_modules/glob
npm WARN audit fix glob@7.1.2 is a bundled dependency of
npm WARN audit fix glob@7.1.2 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix glob@7.1.2 It cannot be fixed automatically.
npm WARN audit fix glob@7.1.2 Check for updates to the fsevents package.
npm WARN audit fix ignore-walk@3.0.1 node_modules/fsevents/node_modules/ignore-walk
npm WARN audit fix ignore-walk@3.0.1 is a bundled dependency of
npm WARN audit fix ignore-walk@3.0.1 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix ignore-walk@3.0.1 It cannot be fixed automatically.
npm WARN audit fix ignore-walk@3.0.1 Check for updates to the fsevents package.
npm WARN audit fix mkdirp@0.5.1 node_modules/fsevents/node_modules/mkdirp
npm WARN audit fix mkdirp@0.5.1 is a bundled dependency of
npm WARN audit fix mkdirp@0.5.1 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix mkdirp@0.5.1 It cannot be fixed automatically.
npm WARN audit fix mkdirp@0.5.1 Check for updates to the fsevents package.
npm WARN audit fix node-pre-gyp@0.10.0 node_modules/fsevents/node_modules/node-pre-gyp
npm WARN audit fix node-pre-gyp@0.10.0 is a bundled dependency of
npm WARN audit fix node-pre-gyp@0.10.0 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix node-pre-gyp@0.10.0 It cannot be fixed automatically.
npm WARN audit fix node-pre-gyp@0.10.0 Check for updates to the fsevents package.
npm WARN deprecated domelementtype@1.3.0: update to domelementtype@1.3.1
npm WARN deprecated is-data-descriptor@0.1.4: Please upgrade to v0.1.5
npm WARN deprecated is-accessor-descriptor@0.1.6: Please upgrade to v0.1.7
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-url@0.4.0: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated domexception@1.0.1: Use your platform's native DOMException instead
npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm WARN deprecated buffer@4.9.1: This version of 'buffer' is out-of-date. You must update to v4.9.2 or newer
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated parcel-bundler@1.12.5: Parcel v1 is no longer maintained. Please migrate to v2, which is published under the 'parcel' package. See https://v2.parceljs.org/getting-started/migration for details.
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 1
npm ERR! path /media/yonnel/SSD-1T/yonnel/Dropbox/01- DIY/25- HTML - CSS - JavaScript/03- JavaScript/Documentation JavaScript/Glisser déposer/smooth-dnd Essais/Installation smooth-dnd/smooth-dnd-vanilla-demo/node_modules/deasync
npm ERR! command failed
npm ERR! command sh -c node ./build.js

J'essaye en mode SU :

Code:

sudo npm audit fix

Toujours des messages d'erreurs :

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
smooth-dnd-vanilla-demo$ sudo npm audit fix
npm WARN old lockfile 
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile 
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile 
npm WARN audit fix chownr@1.0.1 node_modules/fsevents/node_modules/chownr
npm WARN audit fix chownr@1.0.1 is a bundled dependency of
npm WARN audit fix chownr@1.0.1 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix chownr@1.0.1 It cannot be fixed automatically.
npm WARN audit fix chownr@1.0.1 Check for updates to the fsevents package.
npm WARN audit fix ini@1.3.5 node_modules/fsevents/node_modules/ini
npm WARN audit fix ini@1.3.5 is a bundled dependency of
npm WARN audit fix ini@1.3.5 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix ini@1.3.5 It cannot be fixed automatically.
npm WARN audit fix ini@1.3.5 Check for updates to the fsevents package.
npm WARN audit fix minimatch@3.0.4 node_modules/fsevents/node_modules/minimatch
npm WARN audit fix minimatch@3.0.4 is a bundled dependency of
npm WARN audit fix minimatch@3.0.4 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix minimatch@3.0.4 It cannot be fixed automatically.
npm WARN audit fix minimatch@3.0.4 Check for updates to the fsevents package.
npm WARN audit fix minimist@1.2.0 node_modules/fsevents/node_modules/rc/node_modules/minimist
npm WARN audit fix minimist@1.2.0 is a bundled dependency of
npm WARN audit fix minimist@1.2.0 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix minimist@1.2.0 It cannot be fixed automatically.
npm WARN audit fix minimist@1.2.0 Check for updates to the fsevents package.
npm WARN audit fix minimist@0.0.8 node_modules/fsevents/node_modules/minimist
npm WARN audit fix minimist@0.0.8 is a bundled dependency of
npm WARN audit fix minimist@0.0.8 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix minimist@0.0.8 It cannot be fixed automatically.
npm WARN audit fix minimist@0.0.8 Check for updates to the fsevents package.
npm WARN audit fix semver@5.5.0 node_modules/fsevents/node_modules/semver
npm WARN audit fix semver@5.5.0 is a bundled dependency of
npm WARN audit fix semver@5.5.0 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix semver@5.5.0 It cannot be fixed automatically.
npm WARN audit fix semver@5.5.0 Check for updates to the fsevents package.
npm WARN audit fix tar@4.4.1 node_modules/fsevents/node_modules/tar
npm WARN audit fix tar@4.4.1 is a bundled dependency of
npm WARN audit fix tar@4.4.1 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix tar@4.4.1 It cannot be fixed automatically.
npm WARN audit fix tar@4.4.1 Check for updates to the fsevents package.
npm WARN audit fix rc@1.2.7 node_modules/fsevents/node_modules/rc
npm WARN audit fix rc@1.2.7 is a bundled dependency of
npm WARN audit fix rc@1.2.7 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix rc@1.2.7 It cannot be fixed automatically.
npm WARN audit fix rc@1.2.7 Check for updates to the fsevents package.
npm WARN audit fix glob@7.1.2 node_modules/fsevents/node_modules/glob
npm WARN audit fix glob@7.1.2 is a bundled dependency of
npm WARN audit fix glob@7.1.2 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix glob@7.1.2 It cannot be fixed automatically.
npm WARN audit fix glob@7.1.2 Check for updates to the fsevents package.
npm WARN audit fix ignore-walk@3.0.1 node_modules/fsevents/node_modules/ignore-walk
npm WARN audit fix ignore-walk@3.0.1 is a bundled dependency of
npm WARN audit fix ignore-walk@3.0.1 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix ignore-walk@3.0.1 It cannot be fixed automatically.
npm WARN audit fix ignore-walk@3.0.1 Check for updates to the fsevents package.
npm WARN audit fix mkdirp@0.5.1 node_modules/fsevents/node_modules/mkdirp
npm WARN audit fix mkdirp@0.5.1 is a bundled dependency of
npm WARN audit fix mkdirp@0.5.1 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix mkdirp@0.5.1 It cannot be fixed automatically.
npm WARN audit fix mkdirp@0.5.1 Check for updates to the fsevents package.
npm WARN audit fix node-pre-gyp@0.10.0 node_modules/fsevents/node_modules/node-pre-gyp
npm WARN audit fix node-pre-gyp@0.10.0 is a bundled dependency of
npm WARN audit fix node-pre-gyp@0.10.0 fsevents@1.2.4 at node_modules/fsevents
npm WARN audit fix node-pre-gyp@0.10.0 It cannot be fixed automatically.
npm WARN audit fix node-pre-gyp@0.10.0 Check for updates to the fsevents package.
npm WARN deprecated domelementtype@1.3.0: update to domelementtype@1.3.1
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated is-data-descriptor@0.1.4: Please upgrade to v0.1.5
npm WARN deprecated is-accessor-descriptor@0.1.6: Please upgrade to v0.1.7
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
npm WARN deprecated source-map-url@0.4.0: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated request-promise-native@1.0.9: request-promise-native has been deprecated because it extends the now deprecated request package, see https://github.com/request/request/issues/3142
npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated buffer@4.9.1: This version of 'buffer' is out-of-date. You must update to v4.9.2 or newer
npm WARN deprecated domexception@1.0.1: Use your platform's native DOMException instead
npm WARN deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated parcel-bundler@1.12.5: Parcel v1 is no longer maintained. Please migrate to v2, which is published under the 'parcel' package. See https://v2.parceljs.org/getting-started/migration for details.
npm ERR! code 1
npm ERR! path /media/yonnel/SSD-1T/yonnel/Dropbox/01- DIY/25- HTML - CSS - JavaScript/03- JavaScript/Documentation JavaScript/Glisser déposer/smooth-dnd Essais/Installation smooth-dnd/smooth-dnd-vanilla-demo/node_modules/deasync
npm ERR! command failed
npm ERR! command sh -c node ./build.js
 
npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2024-01-31T21_38_14_933Z-debug-0.log

J'essaye le nettoyage du cache npm :

Code:

1
2
3
 
/smooth-dnd-vanilla-demo$ sudo npm cache clean --force
npm WARN using --force Recommended protections disabled.

Encore un message d'erreur.

J'essaye quand même à nouveau l'installation :

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
smooth-dnd-vanilla-demo$ sudo npm install
npm WARN old lockfile 
npm WARN old lockfile The package-lock.json file was created with an old version of npm,
npm WARN old lockfile so supplemental metadata must be fetched from the registry.
npm WARN old lockfile 
npm WARN old lockfile This is a one-time fix-up, please be patient...
npm WARN old lockfile 
npm WARN deprecated set-value@2.0.0: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated is-accessor-descriptor@1.0.0: Please upgrade to v1.0.1
npm WARN deprecated is-accessor-descriptor@0.1.6: Please upgrade to v0.1.7
npm WARN deprecated is-data-descriptor@0.1.4: Please upgrade to v0.1.5
npm WARN deprecated is-data-descriptor@1.0.0: Please upgrade to v1.0.1
npm WARN deprecated set-value@0.4.3: Critical bug fixed in v3.0.1, please upgrade to the latest version.
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated mixin-deep@1.3.1: Critical bug fixed in v2.0.1, please upgrade to the latest version.
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated ini@1.3.5: Please update to ini >=1.3.6 to avoid a prototype pollution issue
npm WARN deprecated is-accessor-descriptor@1.0.0: Please upgrade to v1.0.1
npm WARN deprecated is-accessor-descriptor@1.0.0: Please upgrade to v1.0.1
npm WARN deprecated is-accessor-descriptor@1.0.0: Please upgrade to v1.0.1
npm WARN deprecated flatten@1.0.2: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated domelementtype@1.3.0: update to domelementtype@1.3.1
npm WARN deprecated is-data-descriptor@1.0.0: Please upgrade to v1.0.1
npm WARN deprecated is-data-descriptor@1.0.0: Please upgrade to v1.0.1
npm WARN deprecated is-data-descriptor@1.0.0: Please upgrade to v1.0.1
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated source-map-url@0.4.0: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm WARN deprecated mkdirp@0.5.1: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated chokidar@2.0.4: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
npm WARN deprecated source-map-resolve@0.5.2: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated buffer@4.9.1: This version of 'buffer' is out-of-date. You must update to v4.9.2 or newer
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0
npm WARN deprecated svgo@0.7.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated svgo@1.0.5: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated parcel-bundler@1.9.7: Parcel v1 is no longer maintained. Please migrate to v2, which is published under the 'parcel' package. See https://v2.parceljs.org/getting-started/migration for details.
npm WARN deprecated core-js@2.5.7: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm ERR! code 7
npm ERR! path /media/yonnel/SSD-1T/yonnel/Dropbox/01- DIY/25- HTML - CSS - JavaScript/03- JavaScript/Documentation JavaScript/Glisser déposer/smooth-dnd Essais/Installation smooth-dnd/smooth-dnd-vanilla-demo/node_modules/deasync
npm ERR! command failed
npm ERR! command sh -c node ./build.js
 
npm ERR! A complete log of this run can be found in: /root/.npm/_logs/2024-01-31T21_41_55_193Z-debug-0.log

Un dossier qui semble s'installer disparaît immédiatement.

Est-ce que je me trompe quelque-part oubien est-ce que ce module est trop ancien pour avoir des dépendances qui ne soient pas périmées ?

En tous cas, je galère...

1 pièce(s) jointe(s)

Bonjour,

Oui en effet, galère. Le dépôt à 6 ans...
L'écosystème nodejs n'est pas réputé stable, en voilà un bel exemple.

Vous avez bien fait, dans l'ensemble.

npm audit fix, je ne suis pas tout à fait certain, mais ça semble une bonne idée.

Une meilleure idée serait de suivre le guide de migration de Parcel.

https://parceljs.org/getting-started/migration/

Pas sûr que ça vous mène à une résolution heureuse.

Là, faut prendre le temps d'étudier le dépôt pour considérer la viabilité de cette dépendance.

Le gh-pages https://kutlugsahin.github.io/smooth-dnd-vanilla-demo/ est mort.
Le tracker https://github.com/kutlugsahin/smooth-dnd/issues est mort
Le dépôt principal https://github.com/kutlugsahin/smooth-dnd n'est pas mis à jour depuis 5 ans.

Ici on retrouve tout de même la dep pré compilée prêt à l'emploi
https://github.com/kutlugsahin/smooth-dnd/issues/64

Alors, est ce que c'est mort-mort au point de ne pas devoir s'en servir,
pas évident à trancher. Mais ça sent le sapin quand même.

Un truc à faire dans ces cas là c'est de rechercher dans les forks,
peut être que quelqu'un à repris le projet pour le garder à jour.
Malheureusement, n'ayant plus moi même de compte GH,
je ne peux plus accéder à cette partie du site.

Pièce jointe 650076

Évidemment, on peut tenter de trouver une autre dépendance.
Ou juste le coder soit même.

Bonne journée.

Finalement, je vais peut-être opter pour sortableJS.

https://sortablejs.github.io/Sortable/

J'y trouve également les options dont j'ai besoin :
- Un élément d'une division source peut être placé entre deux éléments d'une division cible (et pas seulement à sa place).
- Les éléments de la division cible peuvent être réorganisés dans un ordre différent.
- Il est possible d'appliquer des animations aux mouvements (pour les rendre plus fluides visuellement).
- On peut faire en sorte que les éléments sources soient clonés, plutôt que déplacés.

- La bibliothèque est vanilla et ne nécessite aucune dépendance.
- Elle fonctionne aussi bien avec une souris qu'avec l'écran tactile d'une tablette semble-t-il...

Il fut étonnamment facile de voir la page de démonstration localement... Il a suffi de lancer "live-server" dans le dossier "Sortable-master" décompressé, et j'ai pu voir des exemples d'options... Aucune dépendance à installer.
À priori, beaucoup de projets utilisent cette solution et la communauté semble active...

Bref, je crois que je vais étudier la solution sortableJS.

Merci pour ton aide

Bonjour,

Oui ça me semble une bonne idée.

Bonne journée.