Mini drag pour utilisation simple

Soyez le premier à donner votre avis sur cette source.

Vue 5 713 fois - Téléchargée 461 fois

Description

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 / Exemple :


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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

@karamel
Messages postés
1747
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
18 février 2020
53
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
++
lddsoft
Messages postés
19
Date d'inscription
vendredi 16 mai 2008
Statut
Membre
Dernière intervention
16 mai 2011

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 !!
geoflore
Messages postés
3
Date d'inscription
mercredi 14 décembre 2005
Statut
Membre
Dernière intervention
26 juin 2007

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.
@karamel
Messages postés
1747
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
18 février 2020
53
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
proftnj
Messages postés
54
Date d'inscription
lundi 10 juillet 2006
Statut
Membre
Dernière intervention
11 septembre 2011

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

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.