Sujet Précédent Sujet Suivant

Problème de drag&drop

hellotk Messages postés 13 Date d'inscription jeudi 15 février 2007 Statut Membre Dernière intervention 4 avril 2011 - 21 mars 2011 à 13:31
hellotk Messages postés 13 Date d'inscription jeudi 15 février 2007 Statut Membre Dernière intervention 4 avril 2011 - 24 mars 2011 à 14:41
Bonjour à tous,

je rencontre un problème lié au drag&drop :

j'ai sur ma page plusieurs DIV (contenant des photos) dont la fonction drag&drop est appelée par javascript.
Jusque là tout va bien...
Or, lorsque je place un lien (href) sur l'image contenue dans une DIV,
la fonction drag&drop ne fonctionne plus.

Je cherche donc une solution qui me permette par exemple d'atteindre mon lien par double-click pour que la fonction drag&drop soit conservée.

je laisse mon code au cas où :

mon javascript: 

function positionne(p_id, p_posX, p_pos_Y){
document.getElementById(p_id).style.left = p_posX;
document.getElementById(p_id).style.top = p_pos_Y;
}
function getPositionCurseur(e){
//ie
if(document.all){
curX = event.clientX;
curY = event.clientY;
}

//netscape 4
if(document.layers){
curX = e.pageX;
curY = e.pageY;
}

//mozilla
if(document.getElementById){
curX = e.clientX;
curY = e.clientY;
}
}

function beginDrag(p_obj,e){
isDragging = true;
objectToDrag = p_obj;
getPositionCurseur(e);
ecartX = curX - parseInt(objectToDrag.style.left);
ecartY = curY - parseInt(objectToDrag.style.top);
}

function drag(e){
var newPosX;
var newPosY;
if(isDragging == true){

getPositionCurseur(e);
newPosX = curX - ecartX;
newPosY = curY - ecartY;

objectToDrag.style.left = newPosX + 'px';
objectToDrag.style.top = newPosY + 'px';

}
}
function endDrag(){
isDragging = false;
}


et le body : 




[monlien 

]


<script type="text/javascript">
positionne('img', '290px', '84px');
isDragging = false;
</script>


PS: vous aurez compris que je ne suis pas un foudre de guerre en programmation, je suis photographe de formation ;)

24 réponses

Précédent
  • 1
  • 2
Réponse 21 / 24
hellotk Messages postés 13 Date d'inscription jeudi 15 février 2007 Statut Membre Dernière intervention 4 avril 2011
23 mars 2011 à 14:08
re-bonjour,

J'ai un dernier petit soucis sur ma fonction drag&drop,
je n'arrives pas à faire en sorte que mes divs passent au premier plan lorsque je les sélectionnent,
je sais que ça a avoir avec le zIndex mais je ne sais pas comment l'assigner dans mon javascript :(
0
Réponse 22 / 24
007Julien Messages postés 276 Date d'inscription mercredi 22 septembre 2010 Statut Membre Dernière intervention 8 janvier 2014 4
23 mars 2011 à 21:30
Dans la fonction drag, appelée au début du déplacement, c'est lorsque l'on a « attrapé » le container de class drag qu'il convient de modifier le zIndex. 
// D'où la modification
if (this.targetobj.className=="drag"){
   this.dragapproved=1;// avec un point virgule cela serait mieux
   this.targetobj.style.zIndex='999';// Ajout
// la suite avec des points virgules en fin de ligne afin que le code supporte des compressions
// les noms à rallonge type offsetx, offsety, targetobj, dragapproved pourraient également être quelque peu réduits...
// ...
}
// Mais il convient aussi de revenir à la valeur initiale 
// en fin de déplacement d'où un autre ajout (un peu au dessus)
document.onmouseup=function(){this.dragapproved=0;
   this.targetobj.style.zIndex='';}

Le 999 permet de passer au dessus de l'image de la ligthbox (de zIndex='90') lorsque le drag and drop est encore efficace en sa présence (c'est-à-dire avec IE).
0
Réponse 23 / 24
hellotk Messages postés 13 Date d'inscription jeudi 15 février 2007 Statut Membre Dernière intervention 4 avril 2011
24 mars 2011 à 09:30
entendu, on a don : 
var dragobject={
x:0, y:0, offsetx:null,offsety:null,targetobj:null,dragapproved:0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0; this.targetobj.style.zIndex='90';}}
,drag:function(e){
var evtobj=window.event? window.event:e
this.targetobj=window.event? event.srcElement:e.target
while (this.targetobj.className!="drag" && this.targetobj.tagName!="BODY") this.targetobj=this.targetobj.parentNode
if (this.targetobj.className=="drag"){
this.dragapproved=1;
this.targetobj.style.zIndex='999';
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault) evtobj.preventDefault()
document.onmousemove=dragobject.moveit}}


mais pourrait-on forcer l'image à venir au premier plan lorsque l'on drope?
Car dans cet exemple, une foi relâchée , celle-ci se repositionne en arrière plan
0
Réponse 24 / 24
hellotk Messages postés 13 Date d'inscription jeudi 15 février 2007 Statut Membre Dernière intervention 4 avril 2011
24 mars 2011 à 14:41
J'ai trouvé ! j'ai ajouté une variable zindex que j'ai incrémentée à mon mouseup : 

var z=1
var dragobject={
x:0, y:0, offsetx:null,offsety:null,targetobj:null,dragapproved:0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0; this.targetobj.style.zIndex=z++;}}

,drag:function(e){
var evtobj=window.event? window.event:e
this.targetobj=window.event? event.srcElement:e.target
while (this.targetobj.className!="drag" && this.targetobj.tagName!="BODY") this.targetobj=this.targetobj.parentNode
if (this.targetobj.className=="drag"){
this.dragapproved=1;
this.targetobj.style.zIndex='999';
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault) evtobj.preventDefault()
document.onmousemove=dragobject.moveit}}


Merci encore
0

Discussions similaires

Drag and drop dans un tableau HTML
dedeisep2 -
bizibiz17 -

6 réponses
Drag and drop en VBA
ankhn -
ucfoutu -

1 réponse
Drag Drop de fichiers
Popolino69 -
Frederyck -

3 réponses
[javafx] drag and drop treeview
cs_quicest -
CptPingu -

9 réponses
DROP TABLE IF EXISTS
MrOsmose -
skweeky -

1 réponse
Rejoignez-nous