Share
Dans de nombreuses applications Web modernes, les développeurs recherchent des moyens pour rendre les interactions plus faciles et plus intuitives pour les utilisateurs. Une fonction glisser-déposer peut aider vos utilisateurs à sélectionner rapidement plusieurs objets..
Nous devons d’abord créer le groupe d’objets qui sera sélectionné. Plus probablement qu'autrement, la plupart des gens utiliseront des scripts côté serveur tels que C # ou PHP. Étant donné que cela dépasse le cadre de ce didacticiel, je les créerai à la main. Nous pouvons utiliser la plupart des tags comme objets. La seule exigence est que des objets de base de la souris soient affectés à l'objet. Pour ce tutoriel, je vais simplement utiliser un tableau avec deux lignes et cinq cellules remplies de DIV avec quelques CSS élémentaires pour leur donner une forme..
La partie la plus importante dans la création des objets est l’identifiant; ils doivent tous avoir un nom similaire. Le mien sera 'box' - et ensuite un numéro unique après le nom. Par conséquent, l'ID de notre premier élément sera "box1" et le dernier sera "box10". Il ne reste plus qu’à ajouter les événements de souris. Pour chaque DIV, nous devons attribuer son "onmousedown" à notre fonction javascript et transmettre l'objet qui appelle la fonction avec le mot clé "this".
Maintenant que nous avons terminé notre code HTML de base, nous devons écrire le javascript. Notre fonction javascript comporte trois parties principales: l'action qui se produit chaque fois que vous sélectionnez ou désélectionnez un objet, l'action qui commence le glisser après le premier clic et l'action qui arrête la sélection. Avant tout cela, nous devons créer une fonction javascript et passer une variable appelée 'obj', ce sera l'objet qui s'appelle cet événement..
fonction StartDragSelect (obj)
Pour l’action déclenchée après la sélection ou la désélection d’un objet, nous avons d’abord besoin d’un moyen permettant à notre fonction de savoir si cet objet est actuellement sélectionné ou désélectionné. Vous pouvez utiliser la plupart des attributs pour cela, mais je trouve que le meilleur moyen est d'utiliser une classe CSS. Non seulement la classe CSS informera javascript si l'objet est sélectionné ou non, mais vous pouvez également ajouter des règles CSS à la classe sélectionnée afin que les utilisateurs puissent distinguer visuellement les objets sélectionnés. Pour le javascript, tout ce dont nous avons besoin est une simple instruction if -else. Pour cette démo, je vais mettre à jour une étendue avec le nombre total d'objets sélectionnés, mais vous pouvez aussi appeler des fonctions ajax et d'autres choses amusantes ici pour rendre le glisser-déplacer plus puissant..
Accentsconagua
function StartDragSelect (obj) if (obj.className == "sélectionné") obj.className = ""; selectNum--; else obj.className = "sélectionné"; selectNum ++; document.getElementById ("selectCount"). innerHTML = selectNum; Pour lancer la sélection par glisser-déplacer, nous utiliserons une boucle "for" pour prendre l'événement onmousedown de chaque objet et l'affecter à l'événement onmouseover de l'objet. Si nous utilisions un script côté serveur pour générer nos objets, nous voudrions également transmettre le nombre total d’objets à la fonction javascript pour que la boucle fonctionne, mais puisque nous les avons créés à la main, nous pouvons coder en dur le nombre..
pour (i = 0; i<11;i++) document.getElementById(i+'d').onmouseover = document.getElementById(i+'d').onmousedown
L'action d'arrêt sera assignée à l'événement onmouseup de l'objet qui a commencé la sélection par glisser. Pour ce faire, nous utiliserons une fonction anonyme indiquant à javascript ce qu'il faut faire lorsque l'événement onmouseup se déclenche. Ensuite, nous utiliserons une boucle "for" pour réaffecter l'événement onmouseup et rendre l'événement onmouseover nul..
obj.onmouseup = function () pour (i = 1; i<11;i++) document.getElementById(i+'d').onmousedown = document.getElementById(i+'d').onmouseover; document.getElementById(i+'d').onmouseover = null;
Vous avez terminé! Évidemment, cet exemple est trivial et utilise du Javascript intégré (pour des raisons de simplicité). Mais je suis sûr que vous pouvez imaginer les possibilités! Avoir un meilleur moyen?
