Defilement images molette et souris drag drop

Bonjour,

Je travaille actuellement sur un site pour un graphiste. Le site entièrement programmé en php et html/css permettra augraphiste de mettre lui même ses images.

Jusque là pas de problèmes.

Là où je bloque c'est sur le java script. En effet, j'ai inclus 2 scripts java en fin de pages pour pouvoir :

1 - Faire défiler les images avec molette / track pad

2 - Avec le pointeur main, quand on clic sa permet de "déplacer" les images en les faisant glisser.

Le problème c'est que le deplacement molette marche, ainsi que le deplacement par clic ( testez le )

Par contre comem vous pouvez le voir j'aimerais ajouter deux elements au code mais je n'y arrive pas:

1 - Quand on arrive à la fin du defilement avec la molette ca s'arrête ( la j'aimerais un petit bon qui nous montre que l'on est au bout )

2 - Quand je suis par exemple au tout debut de mon defilement et que je clique... vous remarquerez qu'il est possible de deplacer l'image hors du champ, et donc se retrouver dans le blanc du fond... je voudrais pouvoir "limiter" le defilement en drag n drop.

Ressources:

Le site : http://web.sample.free.fr/m-circle.php

Le tuto suivit pour les defilement à la molette : https://codes-sources.commentcamarche.net/source/view/51708/1224394#browser

Merci pour votre attention, à bientôt !

Le code defilement molette :

<script type="text/javascript">
 
function deplace(e){
     
var delta = 0;
delta =((e.wheelDelta) ? e.wheelDelta/120 : -e.detail/3)
var val=((delta<0) ? 20 : -20)
document.getElementById('box').scrollLeft=document.getElementById('box').scrollLeft+val
}
     
function selecte(ev){
(navigator.appName.substring(0,3)=="Mic") ? event.returnValue = false : ev.preventDefault();
}
 
function init(){
     
var adi=document.getElementById('box')
if(navigator.appName.substring(0)=="Micro"){
adi.attachEvent('onmousewheel',deplace);
adi.attachEvent('onmousewheel', selecte)
}
else{
var elmouse=((navigator.userAgent.indexOf("Firefox") != -1) ? 'DOMMouseScroll' : 'mousewheel')
adi.addEventListener(elmouse, deplace, false);
adi.addEventListener(elmouse, selecte, false)
}
}
onload=init
 
</script>

Code defilement souris ( clic et relache ) drab and drop :

<script language="javascript">
 
var c = document.getElementById("content");
var decal=0;
var gauche0=0;
var id
var startX = 0;
var startY = 0;
var offsetX = 0;
var offsetY = 0;
var gauche=0
var largimg=100000;
var largcadre=1000;var hautcadre=750; //dimensions du cadre dans lequel on affiche le défilement
var act=1; //variable servant à arrêter ou démarrer en cliquant sur l'image
var gauche=0 //position initiale
 
 
 
function InitDragDrop()
{
     
document.getElementById("content").onmousedown = OnMouseDown;
document.getElementById("content").onmouseup = OnMouseUp;
}
 
function OnMouseDown(e)
{
decal=0;
if(id)clearTimeout(id)
if(e==null)e=window.event;
var target=e.target!= null ? e.target : e.srcElement;
if((e.button==1 && window.event!=null || e.button==0))
{
startX = e.clientX;
startY = e.clientY;
offsetX = number(target.style.left);
offsetY = number(target.style.top);
var tim = new Date();deb=tim.getTime();//millisec
document.onmousemove = OnMouseMove;
target.ondragstart = function(){ return false; };
return false;
}
}
 
function OnMouseMove(e)
{
 
decal=(offsetX + e.clientX - startX);
defile();
if(e.clientX<3){document.onmousemove = null;gauche0=gauche;}
}
 
function OnMouseUp(e)
{
document.onmousemove = null;
gauche0=gauche;
var tim = new Date();fin=tim.getTime();//millisec
vitesse=decal/(fin-deb);//vitesse en px par ms
if(vitesse<4&&(decal>20||decal<-20))amortit(vitesse)
}
 
function number(val)
{ var n = parseInt(val); return n == null || isNaN(n) ? 0 : n; }
 
 
function defile()
{
gauche=gauche0-decal; //rognage gauche
var haut=0; //rognage haut
droite=largcadre+gauche; //position de rognage droite
bas=hautcadre+haut; //position de rognage bas
c.style.clip="rect("+haut+"px, "+droite+"px, "+bas+"px, "+gauche+"px)"; //rognage de l'image
c.style.top=(-haut)+"px"; //repositionnement de l'image
c.style.left=(-gauche)+"px"; //repositionnement de l'image
}
 
 
 
 
 
InitDragDrop();
 
 
Code Html :

</script>

<div id="box"> <!--permet d'insérer l'image dans le texte de la page-->
 
  <div id="content"> <!--(haut, droite, bas, gauche)-->
 
  
   
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="0" HEIGHT="0"">
<TR>
 
 
 
<TD><IMG id="img1" SRC="graph/circle/img1.jpg" BORDER="0"><div class="h8">1</div></TD>
<TD><IMG id="img2" SRC="graph/circle/img2.jpg" BORDER="0"><div class="h8">2</div></TD>
<TD><IMG id="img3" SRC="graph/circle/img3.jpg" BORDER="0"><div class="h8">3</div></TD>
<TD><IMG id="img4" SRC="graph/circle/img4.jpg" BORDER="0"><div class="h8">4</div></TD>
<TD><IMG id="img5" SRC="graph/circle/img5.jpg" BORDER="0"><div class="h8">5</div></TD>
<TD><IMG id="img6" SRC="graph/circle/img6.jpg" BORDER="0"><div class="h8">6</div></TD>
<TD><IMG id="img7" SRC="graph/circle/img7.jpg" BORDER="0"><div class="h8">7</div></TD>
<TD><IMG id="img8" SRC="graph/circle/img8.jpg" BORDER="0"><div class="h8">8</div></TD>
<TD><IMG id="img9" SRC="graph/circle/img9.jpg" BORDER="0"><div class="h8">9</div></TD>
 
 
</TR>
</TABLE>
 
</div>
</div>
  
 
<?php include("fingers-scroll.php"); ?> <!--script pour faire glisser les images-->
<?php include("image-scroll.php"); ?> <!--script pour faire glisser les images-->

encore un fois, merci :)