DRAG & DROP SIMPLE, SIMPLE, SIMPLE
jdmcreator
Messages postés
647
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
-
10 janv. 2009 à 15:59
jdmcreator Messages postés 647 Date d'inscription samedi 30 décembre 2000 Statut Membre Dernière intervention 20 juillet 2012 - 14 oct. 2012 à 00:30
jdmcreator Messages postés 647 Date d'inscription samedi 30 décembre 2000 Statut Membre Dernière intervention 20 juillet 2012 - 14 oct. 2012 à 00:30
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/48931-drag-drop-simple-simple-simple
https://codes-sources.commentcamarche.net/source/48931-drag-drop-simple-simple-simple
14 oct. 2012 à 00:30
* Refonte de l'API
* Permet de passer plusieurs boucles d'effet en même temps
* Ajoute les améliorations de la version 1.6
Voir le changelog et les démos dans le ZIP pour plus d'informations
21 août 2012 à 02:07
* 702 OCTETS
* Compatible avec les autres scripts en n'écrasant plus les événements
* Ajoute un objet retourné contenant la fonction kill() permettant d'empêcher le drag
* Divers bugs réglés et autres changements
Voir le changelog et les démos dans le ZIP pour plus d'informations
13 août 2012 à 03:57
* 555 OCTETS
* Support de position:fixed
* Support d'Internet Explorer
* Support des autres unités de mesure que le pixel (%, em, ex)
Voir le changelog et les démos dans le ZIP pour plus d'informations
3 août 2012 à 02:52
2 août 2012 à 21:40
* 553 OCTETS
* Supporte plusieurs éléments "draggables" à la fois
Voir le changelog et les démos dans le ZIP pour plus d'informations
31 juil. 2012 à 02:18
* 689 OCTETS
* Supporte les appareils mobiles
* Règle différents bugs
* Nouvelle "sous-version" : 1.3 PLUS qui rajoute une fonction de validation en argument
16 juil. 2012 à 17:40
* 0.5 KO
* Fonctionne peu importe la position du curseur
* Support de position:relative
* Nouvelle API
Voir l'introduction et l'exemple pour plus de détails. Je n'ai pas commenté ma source, si vous désirez une version commenté, merci de me le demander. Pour information supplémentaire, j'ai utilisé UglifyJS pour minifier et légèrement compressé ma source (de 10 octets).
N'oubliez de vous abonnez aux mises à jour du code (en haut, à droite) pour recevoir les futures nouvelles versions de ce code !
JDMCreator
25 déc. 2009 à 03:40
.div{
background:url(imge.jpg);
}
.div:hover{
background:url(image_hover.jpg);
}
Si c'est une image utilise du JS:
<script language="javascript" type="text/javascript">
function image(div,etat){
if(etat) div.src="image_hover.jpg";
if(!etat) div.src="image.jpg";
}
</script>
21 déc. 2009 à 14:57
20 déc. 2009 à 20:47
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
17 juin 2009 à 07:35
15 févr. 2009 à 20:30
15 févr. 2009 à 19:08
30 janv. 2009 à 12:10
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
11 janv. 2009 à 15:25
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...
11 janv. 2009 à 14:38
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 ;)
11 janv. 2009 à 08:50
il fonctionne avec tous les navigateurs
ou presque.
@+
10 janv. 2009 à 18:59
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 ;)
10 janv. 2009 à 16:45
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 :
<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>
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
10 janv. 2009 à 16:29
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];
}
;)
10 janv. 2009 à 15:59
tester avec succès sur Safari 3 et IE 7