CodeS-SourceS est hébergé par Frontier.fr

Cliquez ici pour mettre ce site au démarrage de votre navigateur

AccueilCodesTutorielsForumsEmploiLivresConnexion

begin process at 2008 10 12 21:24:47

[SILVERLIGHT] EN ATTENDANT SILVERLIGHT 2 RTW par Audrey

LE NOUVEAU GOJIRA, C'EST POUR LUNDI. par coq

SHAREPOINT : NOUVEL ARTICLE SUR LA MISE EN PLACE DES SCOPES DANS MOSS SEARCHS par ROMELARD Fabrice

HELLO CS par julz

MSDN/TECHNET/MICROSOFT DAYS TOUR 2008 à LILLE LES 13 ET 14 OCTOBRE ! par redo

RE : PROBLEME D'AFFICHAGE D'UNE IMAGE AVEC ONMOUSEOVER ET SHOWTRAIL par stefane26

RE : CENTRAGE D'UNE PAGE AVEC MARGE NéGATIVES par PetoleTeam

RE : PROBLEME D'AFFICHAGE D'UNE IMAGE AVEC ONMOUSEOVER ET SHOWTRAIL par PetoleTeam

CENTRAGE D'UNE PAGE AVEC MARGE NéGATIVES par ludomacho

RE : CRéATION D'UN TCHAT par TheCamel

+ de logiciels à télécharger

1 260 755 membres
581 nouveaux aujourd'hui
14 413 membres club

Trouver une ressource

Trouvez une ressource parmi 38 837 codes, 1 185 989 messages d'aide etc...

Recherche: dans [ Dernières recherches ]

Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

PROTOTYPE DE DRAG'N DROP

Information sur la source

Catégorie :Divers Classé sous : drag, souris, déplacement, position, prototype Niveau : Débutant Date de création : 16/04/2006 Date de mise à jour : 06/05/2006 03:49:17 Vu / téléchargé: 8 313 / 910

Auteur : FasteX_

Ecrire un message privé

Note :

8,00 / 10

Commentaire sur cette source (21)

Ajouter un commentaire et/ou une note

Description

Un code qui, je crois, pourra servir à la réalisation de projets. Comme le titre l'indique, il s'agit d'un prototype de drag'n drop. Je l'ai simplifié du mieux que j'ai pu pour qu'on puisse le modifier, l'adapter, l'améliorer.

Source

********************
*** dragndrop.js ***
********************
/** Définition des variables utilisées **/
var z = 1
var startMouseX, startMouseY, startObjX, startObjY
function configClass() {
initConditions() // Valeurs initiales (aucun mouvement permis)
/** Paramètres appliqués à tout les span ayant comme classe "moveable" **/
var s = document.getElementsByTagName("span")
for (var i=0; i<s.length; i++) {
if (s[i].className == "moveable") {
s[i].onmousedown = function() {initCoord(this,event)}
s[i].onmousemove = function() {dragElement(this,event)}
s[i].onmouseout = initConditions
s[i].onmouseup = initConditions
}
}
}
function initConditions() {
/** Initialement, aucun objet ne peut bouger **/
canMove = new Array(GT("span").length)
for (var i=0; i<GT("span").length; i++) {
canMove[i] = false
}
}
function initCoord(element, event) {
canMove[getN(element)] = true //Permet l'élément de bouger
startMouseX = event.clientX //Pos. X (souris)
startMouseY = event.clientY //Pos. Y (souris)
startObjX = size(element.style.left) //Pos. X (élément)
startObjY = size(element.style.top) //Pos. Y (élément)
bringFront(element) //Met l'élément au premier plan
}
function bringFront(element) {
element.style.zIndex = z+=2
}
function dragElement(element, event) {
/** Si la condition le permet, le span suit la souris **/
if (event.button && canMove[getN(element)]) {
dragX(element, event)
dragY(element, event)
}
}
function dragX(element, event) {
/** Maintenir la distance entre le haut de l'objet et la souris (position X) **/
var dLeft = startMouseX - startObjX
element.style.left = event.clientX - dLeft
}
function dragY(element, event) {
/** Maintenir la distance entre le haut de l'objet et la souris (position Y) **/
var dTop = startMouseY - startObjY
element.style.top = event.clientY - dTop
}
/** Récupère la position (ordre) d'un élément **/
function getN(element) {
for (var i=0; i<GT("span").length; i++) {
if (GT("span")[i] == element)
return i
}
}
/** Capture la valeur numérique d'une grandeur **/
function size(strSize) {
if (strSize.indexOf("px") != -1)
end = strSize.length - 2
else
end = strSize.length
return strSize.substring(0, end)
}
////////////////////////////////
// Pour raccourcir les lignes
////////////////////////////////
function GT(tag) {
return document.getElementsByTagName(tag)
}
function GE(id) {
return document.getElementById(id)
}
************************
*** Drag'n'Drop.html ***
************************
<html>
<title>:: Drag'n'drop ::</title>
<script type="text/JavaScript" src="dragndrop.js"></script>
<style type="text/css">
.moveable {
border: solid 1px;
border-color: silver;
padding: 5;
background-color: #0050FF;
color: white;
position: absolute;
cursor: default;
width: 100px;
height: 100px;
}
</style>
<body onload="configClass();">
1
2
3
4
5
6
7
8
9
</body>
</html>

********************
*** dragndrop.js ***
********************
/** Définition des variables utilisées **/
var z = 1
var startMouseX, startMouseY, startObjX, startObjY

function configClass() {
   initConditions() // Valeurs initiales (aucun mouvement permis)

   /** Paramètres appliqués à tout les span ayant comme classe "moveable" **/
   var s = document.getElementsByTagName("span")
   for (var i=0; i<s.length; i++) {
      if (s[i].className == "moveable") {
         s[i].onmousedown = function() {initCoord(this,event)}
         s[i].onmousemove = function() {dragElement(this,event)}
         s[i].onmouseout = initConditions
         s[i].onmouseup = initConditions
      }
   }
}

function initConditions() {
   /** Initialement, aucun objet ne peut bouger **/
   canMove = new Array(GT("span").length)
   for (var i=0; i<GT("span").length; i++) {
      canMove[i] = false
   }
}

function initCoord(element, event) {
   canMove[getN(element)] = true            //Permet l'élément de bouger
   startMouseX = event.clientX              //Pos. X (souris)
   startMouseY = event.clientY              //Pos. Y (souris)
   startObjX = size(element.style.left)     //Pos. X (élément)
   startObjY = size(element.style.top)      //Pos. Y (élément)
   bringFront(element)                      //Met l'élément au premier plan
}

function bringFront(element) {
   element.style.zIndex = z+=2
}

function dragElement(element, event) {
   /** Si la condition le permet, le span suit la souris **/
   if (event.button && canMove[getN(element)]) {
     dragX(element, event)
     dragY(element, event)
   }
}

function dragX(element, event) {
   /** Maintenir la distance entre le haut de l'objet et la souris (position X) **/
   var dLeft = startMouseX - startObjX
   element.style.left = event.clientX - dLeft
}

function dragY(element, event) {
   /** Maintenir la distance entre le haut de l'objet et la souris (position Y) **/
   var dTop = startMouseY - startObjY
   element.style.top = event.clientY - dTop
}

/** Récupère la position (ordre) d'un élément **/
function getN(element) {
   for (var i=0; i<GT("span").length; i++) {
      if (GT("span")[i] == element)
         return i
   }
}

/** Capture la valeur numérique d'une grandeur **/
function size(strSize) {
   if (strSize.indexOf("px") != -1)
      end = strSize.length - 2
   else
      end = strSize.length
   return strSize.substring(0, end)
}


////////////////////////////////
// Pour raccourcir les lignes
////////////////////////////////
function GT(tag) {
   return document.getElementsByTagName(tag)
}

function GE(id) {
   return document.getElementById(id)
}


************************
*** Drag'n'Drop.html ***
************************
<html>
<title>:: Drag'n'drop ::</title>

<script type="text/JavaScript" src="dragndrop.js"></script>
<style type="text/css">
.moveable {
   border: solid 1px;
   border-color: silver;
   padding: 5;

   background-color: #0050FF;
   color: white;

   position: absolute;
   cursor: default;

   width: 100px;
   height: 100px;
}
</style>

<body onload="configClass();">

<nobr><span class="moveable" style="left:25;top:25;">1</span></nobr>
<nobr><span class="moveable" style="left:125;top:25;">2</span></nobr>
<nobr><span class="moveable" style="left:225;top:25;">3</span></nobr>
<nobr><span class="moveable" style="left:25;top:125;">4</span></nobr>
<nobr><span class="moveable" style="left:125;top:125;">5</span></nobr>
<nobr><span class="moveable" style="left:225;top:125;">6</span></nobr>
<nobr><span class="moveable" style="left:25;top:225;">7</span></nobr>
<nobr><span class="moveable" style="left:125;top:225;">8</span></nobr>
<nobr><span class="moveable" style="left:225;top:225;">9</span></nobr>

</body>
</html>

Conclusion

Mon idée était relativement simple. Pour faire court: calculer la distance entre la souris et les bordures de l'objets lorsqu'on clique dessus, et conserver cette distance lors du déplacement de la souris.

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Drag'n'drop
- Drag'n'Drop.htm 1 056 octets
- dragndrop.js 2 656 octets

Télécharger le zip

Historique

16 avril 2006 06:11:24 :: --
24 avril 2006 05:41:32 :: Maintenant compatible avec FireFox, merci Bultez pour ta modif!
27 avril 2006 06:54:31 :: Plus besoin de définir autre chose que la classe pour configurer un drag'n'drop
27 avril 2006 07:00:42 :: Mis à jour le zip
06 mai 2006 03:49:17 :: Ajout de commentaires

Sources du même auteur

JEU SIMPLE ET EFFICACE DE TIC-TAC-TOE SE JOUANT SUR UN MÊME ...

OUTIL DE RECHERCHE SIMPLE ET PARAMÈTRABLE

CONVERTISSEUR DE MESURES D'ANGLES

MENU DYNAMIQUE HORIZONTAL SIMPLE

MENU DYNAMIQUE VERTICAL AVEC EFFET BOUTON

Toutes les sources de FasteX_

Sources de la même categorie

NOMBRE ALÉATOIRE par gt_371

NOTATION CLASSIQUE VERS NOTATION NPI par coucou747

AJOUTER 'ADDEVENTLISTENER' SUR INTERNET EXPLORER par li9

BOITE DE DIALOGUE (AVEC GRISEMENT DE LA PAGE) par nicomilville

GADGET RTL2 par youdream

Toutes les sources de la catégorie Divers

Sources en rapport avec celle ci

CLASS.JS , TEST D'IMPLÉMENTATION DE CLASS EN JAVASCRIPT par Kimjoa

DKSDRAGDROP : UNE BIBLIOTHÈQUE DE DRAG AND DROP ET DE GESTIO... par DARKSIDIOUS

"DRAG" DE BLOC <DIV> par slog9

LIBRAIRIE DE DRAG AND DROP par mickaelpfr

TAILLES ET POSITIONS DES OBJETS par bultez

Commentaires et avis

Commentaire de DyoChris le 18/04/2006 09:44:57

tu as essayé sur FireFox? Parce que chez moi, ça drag pas

Je ne comprend pas pourquoi tant de gens oublient FF! C'est comme vendre de l'essence pour les 2CV et inutilisable pour les Ferrari!

Commentaire de bultez le 18/04/2006 12:58:06

à Dyochris :
plutôt que de critiquer bêtement avec des arguments
douteux/fallacieux... on propose des améliorations,
c'est plus dans l'esprit de CodesSources il me semble...

à FasteX_ :
quelques petite modifs insignifantes pour que
FireFox soit content ( non exhaustives, pas tout testé )

<style type="text/css">
.moveable {...
}
</style>

<span class="moveable" style="left:100;top:100;width:100;height:100;"
onmousedown="initCoord(this,event);" onmousemove="dragElement(this,event);" onmouseup="initConditions(this,event);"
onselectstart="return false;">

function dragElement(element,event) {
 if (canMove[getN(element)]) {
 dragX(element,event)
 dragY(element,event)
 }
}
....

@+

Commentaire de FasteX_ le 18/04/2006 23:32:21

à Bultez: Pourrais-tu m'expliquer en quoi est nécéssaire l'argument 'event' (car avec IE ca marche pas) ?. Décidement, cette guerre d'incompatibiltés entre les navigateurs m'agace de plus en plus...

Commentaire de bultez le 19/04/2006 07:16:22

salut FasteX_,

rien d'autre à ajouter que ce que j'ai donné...

function dragElement(element,event)...
dragX(element,event)
dragY(element,event)...
function dragX(element,event)...
function dragY(element,event)...
function initCoord(element,event)...
<span class="moveable"
style="left:100;top:100;width:100;height:100;"
onmousedown="initCoord(this,event);"
onmousemove="dragElement(this,event);"
onmouseup="initConditions(this,event);"
onselectstart="return false;">...

je t'envoie la page mise à jour par mail, si tu veux...

>>incompatibilités entre les navigateurs
c'est pénible, moins que certains inconditionnels...

@+

Commentaire de bultez le 27/04/2006 13:02:04

il ne reste plus qu'à faire de l'Orienté Objet,
par exemple !, pour appliquer aux span voulus,
et non pas à tous ( ce qui pourrait être génant ).

Commentaire de FasteX_ le 28/04/2006 02:45:29

C'est là que ma dernière modification intervient. J'ai rajouté une fonction qui configure tous les span ayant comme classe "moveable" en tant qu'objets déplaçables. Le fichier js s'occupe de tout dorénavant.

Commentaire de thedeejay le 03/05/2006 19:35:40

bonjour!
pour moi le zip est "endomagé!"
aidez moi!!!

Commentaire de FasteX_ le 03/05/2006 22:54:43

Moi ça marche, il y a dû avoir un erreur lorsque tu as téléchargé le fichier. Réessai, et si ça ne marche toujours pas, tu peux faire un copier-coller du code (attention aux noms de fichiers). A+

Commentaire de Optitech le 05/05/2006 18:47:29

Slt !

Bravo pour un prototype !

La seule chose que je regrete c'est le manque de commentaire pour essayer de l'améliorer !

Commentaire de FasteX_ le 06/05/2006 03:02:55

Merci pour le commentaire!

*Il faudrait bien que je commente mon code, ce qui sera fait sous peu*

Commentaire de cerede2000 le 06/05/2006 18:26:28

Je ne comprend pas je vien d'essayer sous firefix et ce ne fonctionne pas :(

Commentaire de FasteX_ le 06/05/2006 19:40:47

Salut cerede2000,

Mon ancienne version a été améliorée pour être compatible FireFox. J'ai fait quelques petites modifications depuis. Pourrait-on me dire si les commandes comme "element.onmousemove = function() {...}" sont compatibles avec FireFox? Si ce n'est pas le cas, le problème est là.

Commentaire de FasteX_ le 06/05/2006 19:45:59

Petite note en passant, mon code est maintenant commenté pour faciliter la modification à ceux qui voudraient changer des choses. Bonne prog! :)

Commentaire de cerede2000 le 06/05/2006 19:52:53

Alors effectivement l'erreur qui ressort sous firefox c'est au niveau de:
s[i].onmousedown = function() {initCoord(this,event)}
s[i].onmousemove = function() {dragElement(this,event)}
s[i].onmouseout = initConditions
s[i].onmouseup = initConditions
Mais la je connai pas la correction possible

Commentaire de bultez le 07/05/2006 09:18:49

s[i].onmousedown = function(event) {initCoord(this,event)}
...
@+

Commentaire de cerede2000 le 07/05/2006 09:25:06

Ca change quelque chose mais ca ne fonctionne pas encore totalement!!

Commentaire de bultez le 07/05/2006 11:44:09

bien entendu sur tous les appels de ce type.

Commentaire de FasteX_ le 07/05/2006 17:18:40

Ajouter 'event' comme argument cause une erreur de syntaxe, sur IE en tout cas.

Petite réflexion personnelle (lol):
**Selon moi, il faudrait que JavaScript ressemble un peu plus à Java côté portabilité. C'est-à-dire imposer un interpréteur universel! Celui où celle qui mettera ça au point aura mon admiration.. :)**

Commentaire de cerede2000 le 07/05/2006 17:29:33

Et selon moi, si tous le monde avait les meme standars ca serais quand meme beaucoup plus simple!!!

Commentaire de bultez le 08/05/2006 10:17:47

hélas... la compatibilité... et pas seulement avec JavaScript...

( java est loin d'être exempt : essayer de faire votre
déclaration d'impots, par exemple, pas sûr que vous puissiez !
ça va dépendre de votre système, de la version, de votre micro... )

bref, il reste d'autres erreurs dans le script
j'envoie à FasteX_ pour qu'il fignole ( j'ai fait "du brut" )
et mette à jour !

Commentaire de cerede2000 le 08/05/2006 10:19:58

Cool merci!!

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

position de la souris sur une image [ par golgoth ] Bonjour,Comment faire pour recuperer dans un lien la position de la souris sur une image quand je clic sur celle-ci ? Est ce possible ?Merci pour votr Modifier position de la souris [ par schub1015 ] Bonjour,j'aimerais savoir s'il est possible de modifier la position de la souris ?Merci pour vos réponses. Position de la souris [ par SDK_akira ] Bonjour ^^ Je cherche un moyen de recuperer la position de la souris en javascript, c'est possible ? (j'ai cherché mais je n'ai rien trouvé Position souris et frames [ par PlasTicGoat ] bonjour, J'ai une page web composée de 3 frames: - 1 principale - 1 bandeau en haut - 1 paneau à gauche Je voudrais savoir précis&#23 deplacer des div avec la souris [ par reski_01 ] bonjour a tous, j'ai chercher partout mais je ne trouve pas comment modifier ce que j'ai pu collecter je voudra [DEPLACE]variable definie par la position de la souris [ par Ankaa1988 ] Bonjour a tous, je suis en train de me débattre pour trouver le moyen de modifier une variable en fonction de la position de la souris. je m'explique variable definie par la position de la souris [ par Ankaa1988 ] Bonjour a tous, je suis en train de me débattre pour trouver le moyen de modifier une variable en fonction de la position de la souris. je m'explique Connaître la position d'un input [ par kcin ] Salut à tous.Je vois de partout des codes permettant de connaître la position de la souris, mais existe t-il un code pour connaître la position d'un i Scrollbar et déplacement d'une image avec la souris [ par cepekinio ] Bonjour,Contexte : appli web J2EE (JSP/JVScript/java) .J'ai réaliser une sorte de visionneuse de document(au format jpg) et je viens d'implémenter une Position de la souris sur une image [ par REMqb ] Voila : comment obtenir la position X et Y de la souris quand elle est sur une image?