begin process at 2012 02 06 02:00:33
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Navigation

 > DRAG & DROP SIMPLE, SIMPLE, SIMPLE

DRAG & DROP SIMPLE, SIMPLE, SIMPLE


 Information sur la source

Note :
9,33 / 10 - par 3 personnes
9,33 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Navigation Classé sous :drag, drop, déplacer, div, curseur Niveau :Débutant Date de création :10/01/2009 Date de mise à jour :16/02/2009 15:15:19 Vu :9 617
Auteur : jdmcreator

Ecrire un message privé
Site perso
Commentaire sur cette source (14)
Ajouter un commentaire et/ou une note

 Description

La description est simple : comment déplacer un div sur une page avec le code le plus court possible. Et étrangement, tous les bugs que je rencontrais sur les autes sources de ce genre ont disparu.

Source

  • <html>
  • <head>
  • <title>Drag & drop</title>
  • <script type='text/JavaScript'>
  • var positionx='';
  • var positiony='';
  • var moinsx='';
  • var moinsy='';
  • var deplacable=false;
  • var iddeplacable='';
  • function MoveThisElement()
  • {
  • if(deplacable)
  • {document.getElementById(iddeplacable).style.top=positiony+'px';
  • document.getElementById(iddeplacable).style.left=positionx+'px';}
  • }
  • function OnMoveDown(px,py,id)
  • {
  • deplacable=true;
  • moinsx=px;
  • moinsy=py;
  • iddeplacable=id;
  • }
  • function stopdragndrop(){
  • deplacable=false;
  • }
  • /*Le code provenant de l'éditeur javascript et légèrement modifié montrant comment trouver la position du curseur*/
  • function position(e)
  • {
  • x = (navigator.appName.substring(0,3) == "Net") ? e.pageX :
  • event.x+document.body.scrollLeft;
  • y = (navigator.appName.substring(0,3) == "Net") ? e.pageY :
  • event.y+document.body.scrollTop;
  • positionx =x-moinsx;
  • positiony=y-moinsy;
  • }
  • if(navigator.appName.substring(0,3) == "Net")
  • document.captureEvents(Event.MOUSEMOVE);
  • document.onmousemove = position;
  • </script>
  • </head><!--La balise <body> qui contient la majorité des événements. Pour que l'on puisse surligné sur la page, remplacer le "return false" de onselectstart par "return true"-->
  • <body OnMouseUp="stopdragndrop();" id=bod onselectstart="return false" onMouseMove="MoveThisElement()">
  • <div id=dragetdrop style="background:red;position:absolute;top:100px;left:100px;width:100px;height:100px;" OnMouseDown="OnMoveDown('50','50',this.id);"></div></div>
  • </body>
  • </html>
<html>
<head>
<title>Drag & drop</title>
<script type='text/JavaScript'>
var positionx='';
var positiony='';
var moinsx='';
var moinsy='';
var deplacable=false;
var iddeplacable='';
function MoveThisElement()
{
if(deplacable)
{document.getElementById(iddeplacable).style.top=positiony+'px';
document.getElementById(iddeplacable).style.left=positionx+'px';}
}
function OnMoveDown(px,py,id)
{
deplacable=true;
moinsx=px;
moinsy=py;
iddeplacable=id;
}
function stopdragndrop(){
deplacable=false;
}
/*Le code provenant de l'éditeur javascript et légèrement modifié montrant comment trouver la position du curseur*/
function position(e)
	{
	x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : 

event.x+document.body.scrollLeft;
	y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : 

event.y+document.body.scrollTop;
	positionx =x-moinsx;
positiony=y-moinsy;
	}
if(navigator.appName.substring(0,3) == "Net")
	document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = position;
</script>
</head><!--La balise <body> qui contient la majorité des événements. Pour que l'on puisse surligné sur la page, remplacer le "return false" de onselectstart par "return true"-->

<body OnMouseUp="stopdragndrop();" id=bod onselectstart="return false" onMouseMove="MoveThisElement()">
<div id=dragetdrop  style="background:red;position:absolute;top:100px;left:100px;width:100px;height:100px;" OnMouseDown="OnMoveDown('50','50',this.id);"></div></div>
</body>
</html>

 Conclusion

La source contient un code modifié provenant de l'Éditeur Javascript montrant comment trouver la position du curseur

Testé avec succès sous FireFox 3, Internet Explorer 7 et Safari 3

S'il y a un problème, avertissez-moi ;)


 Historique

10 janvier 2009 15:57:20 :
Légère modification, notament des bouts de code inutiles
10 janvier 2009 16:10:31 :
Autres petites modifications ^^
11 janvier 2009 16:05:08 :
J'ai modifié la source pour pouvoir utiliser plus simplement plusieurs DIV en même temps.
16 février 2009 15:15:19 :
J'ai remplacé les champs 'hidden' par des variables ;)

 Sources du même auteur

Source avec Zip TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS
RÉPÉTER UN VIDÉO YOUTUBE EN JAVASCRIPT À L'AIDE D'UN MARQUE-...
Source avec Zip 20 ASTUCES POUR PROGRAMMEURS JAVASCRIPT AVANCÉS
Source avec Zip PERMETTRE LA SÉLECTION DU TEXTE PAR L'UTILISATEUR
Source avec Zip WMANAGER.JS : GÉRER LES FICHIERS WMA AVEC WINDOWS MEDIA PLAY...
Toutes les sources de jdmcreator

 Sources de la même categorie

Source avec Zip Source avec une capture ANTI-ROBOTS V 1.0 par MacGaliver
Source avec une capture PRÉSENTOIR PAGE/SUJET par tiranus
Source avec Zip Source avec une capture NAVIGATEUR INTERNET HAVRET par HAVRETos
Source avec Zip WMANAGER.JS : GÉRER LES FICHIERS WMA AVEC WINDOWS MEDIA PLAY... par jdmcreator
Source avec Zip Source avec une capture NAVIGATION PAR AJAX, CHARGEMENT DES PAGES SANS RECHARGEMENT par zulrigh
Toutes les sources de la catégorie Navigation

 Sources en rapport avec celle ci

Source avec une capture DRAG/DROP/REDIMENSIONNER... par sitajony
Source avec Zip Source avec une capture DRAG DROP DE VIDEOS par kazma
Source avec Zip Source avec une capture DKSDRAGDROP : UNE BIBLIOTHÈQUE DE DRAG AND DROP ET DE GESTIO... par DARKSIDIOUS
"DRAG" DE BLOC <DIV> par slog9
Source avec Zip Source avec une capture BOXMANAGEMENT: COMME LA PAGE D'ACCUEIL PERSONALISÉE DE GOOGL... par the_wwt

Commentaires et avis

Commentaire de jdmcreator le 10/01/2009 15:59:17

Aussi,

tester avec succès sur Safari 3 et IE 7

Commentaire de macsou01 le 10/01/2009 16:29:42

Salut,
Sous Firefox 3, ça ne marche pas très bien (sauf la première fois qu'on le déplace)...
Sinon il serait bien que, quand on déplace, le curseur ne soit pas placé au centre du div, mais qu'il reste au même endroit que lorsque l'on a cliqué. (pour cela il va falloir une fonction pour avoir la position du div) :

function getDivPos(div) {
var left = 0;
var top = 0;
if (div.offsetParent) {
do {
left += div.offsetLeft;
top += div.offsetTop;
} while (div = div.offsetParent);
}
return [left, top];
}

;)

Commentaire de Bul3 le 10/01/2009 16:45:07


ça part d'un bon sentiment,
mais c'est du déjà vu ( et il y en a qui fonctionnent et bien !!! )
un peu obsolète ( <SCRIPT LANGUAGE=JavaScript>
           et document.captureEvents(Event.MOUSEMOVE); ... )
on peut simplifier... exemple :

<body>
<div id="dragetdrop"  
style="background:red;position:absolute;top:100px;
                       left:100px;width:100px;height:100px;">
</div>
<script type='text/JavaScript'>
var deplacable=false;
function MoveThisElement(e,id1)
{if (deplacable)
{var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
document.getElementById(id1).style.top=y-50+'px';
document.getElementById(id1).style.left=x-50+'px';
}
}
document.onmousemove=function(event)
        { MoveThisElement(event,'dragetdrop'); }
document.onmouseup=function()
        { deplacable=false; }
document.onselectstart=function()
        { return false; }
document.getElementById("dragetdrop").onmousedown=function()
        { deplacable=true; }
</script>
</body>

brut de fonderie, c'est un exemple ! pas passé de temps...
ça aurait été très bien de faire en POO
avec un exemple sur plusieurs objets déplaçables
ça existe déjà aussi, mais bon....

à améliorer et peaufiner donc

Commentaire de jdmcreator le 10/01/2009 18:59:46

Oui, à raffiner, c'est ma première source et je ne sais du javascript que depuis un mois.

Pour le centre du div, c'est par choix que j'ai mis cela pour faciliter l'utilisation (à mon avis ^^) mais je vais quand même vérifier le tout

Pour FireFox, je vais voir ce que je peux faire ;)

Commentaire de Bul3 le 11/01/2009 08:50:45

regarde l'exemple que j'ai mis.
il fonctionne avec tous les navigateurs
ou presque.
@+

Commentaire de jdmcreator le 11/01/2009 14:38:00

D'accord, je vais le regarder, merci ;)

J'y travaile depuis hier et j'ai beaucoup amélioré mon code (possibilité d'avoir plusieurs divs facilement, plus grande souplesse etc.) et j'y continue ;)

Commentaire de jdmcreator le 11/01/2009 15:25:40

En attendant que je finisse mon code compressé, je vais posté le code avec deux exemple : une "image" et un div.

Cette fois-ci, je l'ai testé sous FF3 et il fonctionne mais je ne sais pas comment enlever la sélection sans utiliser un géant code, onselectstart ne semble pas fonctionner...

Commentaire de bouzakher le 30/01/2009 12:10:53

salut
chef il y a une possibilité de rendre le carreau rouge déplacé d'une façon rectiligne c tout  autrement dit sur l'axe d'abscisse  et fixer les borne
et d'insérer a la place du carreau une image
merci d'avance

Commentaire de sitajony le 15/02/2009 19:08:13 10/10

Grâce à toi j'ai enfin un script que je comprends et j'ai pu améliorer la page d'accueil de mon site (Facon vista) et ton script la amélioré merci!

Commentaire de jdmcreator le 15/02/2009 20:30:18

Ça fait plaisir ;)

Commentaire de SapherEmbended0 le 17/06/2009 07:35:40 10/10

Wep c'est utile.

Commentaire de YannCo le 20/12/2009 20:47:33 8/10

Très sympa, je cherchais une petite fonction de genre pour faire un gadget sur mon site et c'est quasiment ça !

Juste une question, j'aimerais que quant on passe le div sur un élément, en l'occurrence une image, changer cette image !

Comment je peux m'y prendre ? ça existe ondivover ? lol

Commentaire de jdmcreator le 21/12/2009 14:57:37

Non mais en utilisant les propriétés offsetTop et offsetLeft de l'image, tu devrais être capable de faire quelque chose ;)

Commentaire de sitajony le 25/12/2009 03:40:12

YannCo: Tu veux changer l'image? Si c'est en background sur une div utilise tout simplement une class en CSS:

.div{
background:url(imge.jpg);
}
.div:hover{
background:url(image_hover.jpg);
}
Si c'est une image utilise du JS:

<img src="image.jpg" onmouseover="image(this,1)" onmouseout="image(this,0)"/>
<script language="javascript" type="text/javascript">
function image(div,etat){
if(etat) div.src="image_hover.jpg";
if(!etat) div.src="image.jpg";
}
</script>

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

Ouvrir un div + drag&drop [ par yanis7518 ] Salut a tousvoila j'ai une page avec un div fermé(mais que l'on peut ouvrir en cliquant sur un bouton) dans ce div je peux faire des drag&amp;drop d'o Drag and Drop [ par Killion ] Bonsoir,Je suis a la recherche d'un script de drag and drop, je suis tombé sur scriptaculous et sur rico... Mon problème est le suivant: j'aimerai pou Drag ans Drop avez vous le meme probleme ? [ par chiktika ] Bonjour,j'ai réalisé un drag and drop pour faire passer des images d'un div a un autre.Un petit apercu rapide de l'architecture html :&lt;div id="cont drag n drop d'image [ par crasse ] bonsoir !Je suis en train d'essayer de realiser une interface simple de drag n drop d'image mais je n'y parviens pas completement...pour commencer, je Probleme d'update BDD avec Drag 'n Drop [ par IceP42 ] Bonjour, j'ai un probleme avec l'utilisation du drag'n drop sur une liste de jeux. Je récupère la liste des jeux à partir d'une base de donnée sql et les mystères du Drag N drop [ par kotok ] Bonjour à tous les accros de Javascript. Je suis un nouveau viendu ! C'est à dire un peu ... long à la détente si vous voyez ce q Problème sur un drag & drop [ par destiny ] Bonjour,Je viens de faire un drag&amp;drop est j'ai un petit "problème". Quand je drag mon élément, ma souris fait en même temps une sélection textes/ drag and drop sur un lecteur flash [ par tntman ] bonjour,je cherche le code source pour faire ça :http://demos.dojotoolkit.org/demos/video/sinon une autre façon de faire du drag and drop sur un lecte Pb drag n drop avec script.aculo.us [ par yanis7518 ] salut a tousvoila j'ai deux questions pour lesquelles je ne trouve pas de réponsesJ'utilise une liste "Sortable" fourni par script.aculo.us j'arrive a Position du curseur dans une div [ par Dj Nam ] Bonjour tout le monde,Dans le cadre de développement d'un site web, j'aimerais tranformer une div en textarea, pour cela j'utilise le javascript car j


Nos sponsors


Sondage...

Comparez les prix


Acer Liquid (noir) (XP.H480Q.013)
Entre 300€ et 346€

Visiter le guide achat

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

Photo Underwater View of the Ocean With LIght Shining Through the WavePhoto Renewable Energy is Within Reach
Photo Flug zum Matterhorngipfel 

Visiter la photothèque
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,451 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)