Mini drag pour utilisation simple

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (@karamel)