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

Ce site au démarrage

begin process at 2010 03 13 22:03:45

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

PROTOTYPE DE DRAG'N DROP

Information sur la source

Note :

8,00 / 10

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é :10 758 / 1 041

Auteur : FasteX_

Ecrire un message privé

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

Les Membres Club peuvent 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

SÉQUENCEUR par jdmcreator

COMPRESSION DE TEXTE CÔTÉ CLIENT EN JS VIA ALGORYTHME LZW par niamor36

VIRTUAL IPHONE (V.2) par loicseg

MOOTABLEAU par Miky76

CALCULER VOTRE IMC par lesnouesremy

Toutes les sources de la catégorie Divers

Sources en rapport avec celle ci

POST-IT POUR LE WEB par jululu

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 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 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 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?

Nos sponsors

Derniers Blogs

FAIRE APPARAITRE L'ONGLET 'DéVELOPPEUR' DANS OFFICE 2010 par neodante

[ASTUCE] PATCH POUR MICROSOFT FORUMS NNTP BRIDGE V1 par pierre

PB LORS DE L'INSTALLATION SHAREPOINT 2010. par Patrick Guimonet

[WF4] AJOUTER DES CONTRAINTES à UNE ACTIVITé (2/2) par JeremyJeanson

[WF4] AJOUTER DES CONTRAINTES à UNE ACTIVITé (1/2) par JeremyJeanson

Forum

SLT par kurapikt

HELP! FORMULAIRE - STYLE CSS/PHP & SESSION par LuxeurDelphii

RE : POSITION D'UN DIV TOUJOURS EN HAUT par fenoril

RE : AIDEZ MOI SVP PB AVEC LES SELECT par frandzd

RE : XMLHTTPREQUEST DE GET à POST par djfayr

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Site internet php
Budget : 350€
site formation reiki distance
Budget : 900€
Banniere Flash Drupal
Budget : 150€

Logiciels

Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)
XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)

Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise...

Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate
Xilisoft DVD Ripper Ultimate (5.0.64.0304)
XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)

Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ...

Cliquez pour télécharger Xilisoft DVD Ripper Ultimate
Axalot, logiciel de sauvegarde de données en ligne (1.10.108.1)
AXALOT, LOGICIEL DE SAUVEGARDE DE DONNéES EN LIGNE (1.10.108.1)

Perdre tout le contenu de votre disque dur, vous imaginez ? Vos photos, vos musiques, votre compt...

Cliquez pour télécharger Axalot, logiciel de sauvegarde de données en ligne
Rigs of Rods (63.3)
RIGS OF RODS (63.3)

c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo...

Cliquez pour télécharger Rigs of Rods
Konvertor (4.00)
KONVERTOR (4.00)

Le logiciel est un gestionnaire multimedia affichant, jouant et convertissant plus de 2000 format...

Cliquez pour télécharger Konvertor