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

Ce site au démarrage

begin process at 2012 02 09 18:09:55

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é :13 057 / 1 120

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

COLONNES ADAPTABLES EN HAUTEUR par dronoide

VECTEURS ET MATRICES: OUTILS GRAPHIQUES UTILES par william voirol

HTML5 PLAYER par kazma

SCROLLBAR PERSONNALISABLE par kazma

INFO BULLE par RudiRatlos

Toutes les sources de la catégorie Divers

Sources en rapport avec celle ci

COULEUR DE FOND SELON POSITION SOURIS par mailliam

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 Dessiner et redimensionner un cercle ou disque à la souris... :s [ par Tyra3l ] Bonjour à tous, Tout d'abord joyeux noël :p Je bloque sur un problème en javascript : en effet je dois pouvoir créer un cercle de diamètre x (x étan

Nos sponsors

Derniers Blogs

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi

WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson

TECHDAYS PARIS 2012 : NOUVELLES TENDANCES DU POSTE DE TRAVAIL - BRING YOUR OWN PC par ROMELARD Fabrice

Forum

PB GETTER ET SETTER SUR IE<9 par aerolyte

CREATION DE SCORING OU RATING par Alex16000

API ANYWHERE DE TWITTER par coach872

RE : VéRIFICATION FORMULAIRE par maha1987

SCROLL D'IMAGES DANS UNE PAGE HTML : ORDRE ALéATOIRE DES IMAGES ? par cyber5784

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Fonctionnalites supplementaires sous Joomla
Budget : 800€
Animation interactive pour I phone
Budget : 2 000€
Creation de site web pour une administration scolaire
Budget : 10 000€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011