begin process at 2012 05 28 13:54:16
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > MINI DRAG POUR UTILISATION SIMPLE

MINI DRAG POUR UTILISATION SIMPLE


 Information sur la source

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

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :drag, deplacer, drag drop Niveau :Débutant Date de création :14/08/2009 Date de mise à jour :07/08/2010 18:21:51 Vu / téléchargé :4 237 / 364
Auteur : kazma

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

 Description

Cliquez pour voir la capture en taille normale
un tout petit systeme de drag  il n'est pas optimise pour des grands projets mais pour une utilisation simple il fonctionne tres tres bien et en plus il est tres tres simple a mettre en oeuvre
++

Source

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  • <STYLE type="text/css">
  • .Style0 {
  • position:absolute;
  • width:200px;
  • height:150px;
  • border-style:groove;
  • border-width:2px;
  • background-color:#B9B3A7;
  • }
  • </style>
  • <script type='text/JavaScript'>
  • var rar=true
  • function selecte(ev){
  • ev.preventDefault();
  • }
  • function souris(s){
  • dde=(navigator.vendor) ? document.body : document.documentElement
  • setX =((navigator.appName.substring(0,3)=="Mic") ? event.clientX : s.clientX) + dde.scrollLeft;
  • setY =((navigator.appName.substring(0,3)=="Mic") ? event.clientY : s.clientY) + dde.scrollTop;
  • return false
  • }
  • document.onmousemove=souris
  • function sp(evt,cen){
  • if(rar && arguments.length!=0){
  • (navigator.appName.substring(0,3)=="Net") ? document.addEventListener("mousedown", selecte, false) : null;
  • var px=setX-cen.offsetLeft;
  • var py=setY-cen.offsetTop;
  • dragval=setInterval("posi("+px+","+py+",'"+cen.id+"')",10);
  • rar=false
  • }
  • else{
  • (navigator.appName.substring(0,3)=="Net") ? document.removeEventListener("mousedown", selecte, false) : null;
  • clearInterval(dragval);
  • rar=true
  • }
  • }
  • function posi(decx,decy,fen){
  • document.getElementById(fen).style.left=(setX-decx)+"px";
  • document.getElementById(fen).style.top=(setY-decy)+"px";
  • }
  • </script>
  • </head>
  • <body>
  • <div class="Style0" id="ta" style="top: 50px; left: 631px;" onmousedown='sp(event,this);' onmouseup="sp()">
  • </div>
  • <div class="Style0" id="tb" style="top: 56px; left: 180px;" onmousedown='sp(event,this);' onmouseup="sp()">
  • </div>
  • <div class="Style0" id="tc" style="top: 404px; left: 399px;" onmousedown='sp(event,this);' onmouseup="sp()">
  • </div>
  • <div class="Style0" id="td" style="top: 329px; left: 71px;" onmousedown='sp(event,this);' onmouseup="sp()">
  • </div>
  • <div class="Style0" id="te" style="top: 330px; left: 724px;" onmousedown='sp(event,this);' onmouseup="sp()">
  • </div>
  • <img id="tf" src="cs.png" style="position: absolute; top: 158px; left: 344px; width: 200px;" onmousedown='sp(event,this)' onmouseup="sp();">
  • </body>
  • </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<STYLE type="text/css">

.Style0 {
position:absolute;
width:200px;
height:150px;
border-style:groove;
border-width:2px;
background-color:#B9B3A7;
}
</style>
<script type='text/JavaScript'>
var rar=true

function selecte(ev){
ev.preventDefault();
}

function souris(s){
dde=(navigator.vendor) ? document.body : document.documentElement
setX =((navigator.appName.substring(0,3)=="Mic") ? event.clientX : s.clientX) + dde.scrollLeft;
setY =((navigator.appName.substring(0,3)=="Mic") ? event.clientY : s.clientY) + dde.scrollTop;
return false
}
document.onmousemove=souris

function sp(evt,cen){
if(rar && arguments.length!=0){
(navigator.appName.substring(0,3)=="Net") ? document.addEventListener("mousedown", selecte, false) : null;
var px=setX-cen.offsetLeft;
var py=setY-cen.offsetTop;
dragval=setInterval("posi("+px+","+py+",'"+cen.id+"')",10);
rar=false
}
else{
(navigator.appName.substring(0,3)=="Net") ? document.removeEventListener("mousedown", selecte, false) : null;
clearInterval(dragval);
rar=true
}
}

function posi(decx,decy,fen){
document.getElementById(fen).style.left=(setX-decx)+"px";
document.getElementById(fen).style.top=(setY-decy)+"px";
}
</script>
</head>
<body>

<div class="Style0" id="ta" style="top: 50px; left: 631px;" onmousedown='sp(event,this);' onmouseup="sp()">
</div>

<div class="Style0" id="tb" style="top: 56px; left: 180px;" onmousedown='sp(event,this);' onmouseup="sp()">
</div>

<div class="Style0" id="tc" style="top: 404px; left: 399px;" onmousedown='sp(event,this);' onmouseup="sp()">
</div>

<div class="Style0" id="td" style="top: 329px; left: 71px;" onmousedown='sp(event,this);' onmouseup="sp()">
</div>

<div class="Style0" id="te" style="top: 330px; left: 724px;" onmousedown='sp(event,this);' onmouseup="sp()">
</div>

<img id="tf" src="cs.png" style="position: absolute; top: 158px; left: 344px; width: 200px;" onmousedown='sp(event,this)' onmouseup="sp();">
</body>
</html>

 Conclusion

tout tout simple

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

17 août 2009 13:34:15 :
débogage
18 août 2009 21:21:22 :
debogage
24 août 2009 22:04:22 :
debogage
07 août 2010 18:21:51 :
mise a jour dom pour webkit

 Sources du même auteur

Source avec Zip Source avec une capture BOUTON ROTATIF
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT...
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS
Source avec Zip Source avec une capture DIAPO EN CSS 3D
Toutes les sources de kazma

 Sources de la même categorie

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator
Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Toutes les sources de la catégorie Graphique

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS par kazma
Source avec Zip Source avec une capture POST-IT POUR LE WEB par jululu
Source avec une capture DRAG/DROP/REDIMENSIONNER... par sitajony
Source avec Zip Source avec une capture DRAG DROP DE VIDEOS par kazma
DRAG & DROP SIMPLE, SIMPLE, SIMPLE par jdmcreator

Commentaires et avis

Commentaire de proftnj le 17/08/2009 02:36:49 7/10

Quand je déplace l'image avec IE, j'ai l'alerte suivante: "Ligne 36 Caractère 1 'offsetLeft' a la valeur Null ou n'est pas un objet". Pour les autres div, ça fonctionne très bien et pourra me servir.

Commentaire de kazma le 17/08/2009 13:36:20 administrateur CS

c'est bon j'ai corrige il siffisait de rajouter un return false

j'en ai profiter pour rajouter une petite fonction afin d'eviter la selection de texte au moment du dragage

Commentaire de proftnj le 18/08/2009 00:41:40

C'est OK maintenant! Remarque qui n'a rien à voir avec javascript: écrire <style type="text/css"> et pas <style> et fermer la balise meta (avec /) pour bien respecter le XHTML selon le W3C. Bravo pour le debug rapide et l'amélioration!  

Commentaire de geoflore le 20/08/2009 15:46:39 9/10

Ce n'est pas un "petit drag" mais un très bel outil pour les naturalistes.  J'avais aussi remarqué l'erreur corrigée.  Votre produit  permet de placer des clichés dans l'ordre souhaité par l'utilisateur  pour comparaison. La valeur de  cet outil n'a pas de prix pour un naturaliste.....
Note = 9  pour ne pas dire 10.
Je vais l'utiliser dans le site FLORALP :option GRAMINES
Merci encore et félicitations

Commentaire de proftnj le 20/08/2009 16:39:50

Il reste un petit bug avec IE. Quand on sélectionne un texte sur la page pricipale et que l'on touche une fenêtre dragable, dès que l'on relache le bouton de la souris, une erreur javascript est signalée: 'offsetLeft' a la valeur Null ou n'est pas un objet. Sinon, c'est effectivement un script bien fichu et bien utile pour certaines pages web. Je ne sais pas du tout comment corriger ce 'bug', désolé.

Commentaire de kazma le 20/08/2009 18:45:14 administrateur CS

j'avait aussi remarque un bogue pour offset si il s'agit du meme probleme je l'ai corrige

++

Commentaire de proftnj le 23/08/2009 00:38:49

Il y a toujours le même bogue, mais l'erreur affichée est différente: "Ligne 42 Caractère 1 'dragval' est indéfini". Quelqu'un trouvera peut-être un moyen de réparer. Ce super script finira bien un jour par être parfait. Patience...

Commentaire de kazma le 24/08/2009 22:10:26 administrateur CS

j'ai refait un correctif en theorie sa devrait etre bon je n'en suis pas sur car de mon cote sa marchait avant mais je sais d'ou venait le probleme. (une histoire de mouseover mouseout)en tout cas je pense et j'espere que c'est la bonne

Commentaire de geoflore le 31/08/2009 12:17:33

Je viens d'utiliser votre produit dans le site
Floralp/Gramines/Bromus/especes disponibles/Comparer et determiner
J'ai mis un lien sur votre code ( en haut à gauche) comme vous pourrez le constater.
Merci encore pour avoir mis cet outil à la disposition du public.

Commentaire de lddsoft le 03/09/2009 16:24:56 9/10

Script très intéressant en effet et qui permet pas mal d'applications lorsqu'on est quelque peu créatif.
Petit bémol toutefois : Firefox 3 n'est pas tout à fait content, car 3 variables ne sont pas déclarées :
après var rar=true;
il faudrait ajouter :
var setX;
var setY;
var dragval;

On s'approche de la perfection !!

Commentaire de kazma le 03/09/2009 23:30:53 administrateur CS


il est vrait que pour ce script j'ai essayer d'aller a l'essentiel tout en respectant au maximum la norme mais personne n'est parfait

merci pour la note
++

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

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 Mouse Drag and Drop [ par sonialand ] salut tout le monde,J'ai trouvé un code sur internet que j'ai modifié un peu pour faire le mouse drag and drop d'un element.mais le probleme c'est que drag and drop [ par moukit233 ] slt js un debutant avec dojo ....je veux un methode Me permettre de de activer les changement de ma fonction deplacer avec drag and drop sans fait act deplacer une image [ par lesnouesremy ] bonjour je voudrai savoir comment deplacer une image avec le clavier.aider svp deplacer une image [ par lesnouesremy ] bonjour je voudrai céer un jeu en javascript mais je n'arrive pas a déplacer le personnage.merci de m'aider moi svp! Probleme deplacer la souris [ par maxime5000 ] Bonjour j'ai suivice tuto pour deplacer la souris ou en veut et sa marche pas [url=http://www.javascriptfr.com/tutoriaux/POSITION-SOURIS-DANS-PAGE_47 Drag and drop d'une image sur mon PC vers internet [ par jeanmorelle ] Bonjour, Est-il possible de faire un drag and drop d'une image présente sur mon ordinateur vers un site internet, dans un endroit prévu pour recevoir [Flickr] Upload fichier sur site internet puis drag and drop...? [ par fabricefff ] Salut, je suis en train de construire un site internet. Je bloque sur une étape importante. Comment faire ceci : 1) comment faire pour que les utili DRAG AND DROP DU BUREAU WINDOWS VERS NAVIGATEUR WEB POUR ENVOYER VERS SERVEUR FTP [ par developseri ] Bonjour, Je suis actuellement en stage en agence web. Mon objectif est de programmer une page web en javascript, php, html qui a pour but d'envoyer u


Nos sponsors


Sondage...

Comparez les prix


Mio - Moov V735 - GPS Europe - Ecran 7"
Entre 305€ et 375€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
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 : 0,733 sec (3)

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)