pb dans un drag and drop lors de sélection d'un élément a bouger

Version imprimable

16/10/2006, 23h22
WalidNat

pb dans un drag and drop lors de sélection d'un élément a bouger
Bonjour à tous,

tout d'abord merci de votre aide.
J'ai un soucis avec un script qui me permettrais de faire un drag & drop sur un élément d'une page.

Citation:

function beginDrag(bloc,e){
isDragging = true;
objectToDrag = bloc;
objectToDrag.style.setProperty("background-color", "red", "");
// objectToDrag.style.background-color = "red";
getPositionCurseur(e);
ecartX = curX - parseInt(objectToDrag.style.left);
ecartY = curY - parseInt(objectToDrag.style.top);
}

Citation:

<div id="bloc" onmousedown="beginDrag(this,event);" onmousemove="drag(event);" onmouseup="endDrag();" ></div>

Visiblement, j'ai 2 pb :
- quand je fais objectToDrag.style.background-color ... , il ne le prend pas en compte et je suis donc obligé de passer par un setProperty, pourquoi?
- donc forcément, lorsque je j'ai un ecartX = curX - parseInt(objectToDrag.style.left);, il n'est pas capable d'en donner la valeur
quelqu'un sait pourquoi?

Merci bcp
17/10/2006, 02h30
lalouve

Il faudrait un peu plus de code...

au lieu de background-color essaye backgroundColor

Voici un code de drag 'n drop

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
<html>
    <head>
    </head>
    <body>
        <div id="maDiv" style="position:absolute; width:200px; height:150px">
            Une div pour des essais !
        </div>
        <script>
            var maDiv = document.getElementById('maDiv');
            maDiv.style.backgroundColor = 'green';
            maDiv.onmousedown = beginDrag;
            var curX, curY;
            var flagDrag = false;
 
            function beginDrag(e) {
                maDiv.style.backgroundColor = 'red';
                curX = e.clientX-maDiv.offsetLeft;
                curY = e.clientY-maDiv.offsetTop;
                flagDrag = true;
                maDiv.onmousemove = drag;
                maDiv.onmouseup = endDrag;                
            }
 
            function drag(e) {    
                if(flagDrag) {
                    maDiv.style.left = e.clientX - curX;
                    maDiv.style.top = e.clientY - curY;
                }
            }
 
            function endDrag(e) {
                flagDrag = false;
                maDiv.style.backgroundColor = 'green';
            }
        </script>
    </body>
</html>

Ne fonctionne que sous FireFox, pas encore eu le temps d'assurer la compatibilité sous tous les navigateurs !

18/10/2006, 12h56
WalidNat

Alors je vous balance tout mon code permettant le drg&drop :

Citation:

var isDragging = false;
var objectToDrag;
var obj;
var ecartX;
var ecartY;
var curX;
var curY;

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(bloc,e){
isDragging = true;
objectToDrag = document.getElementById(bloc);
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;
}

Citation:

<body>
<div id="bloc" onmousedown="beginDrag(this.id,event);" onmousemove="drag(event);" onmouseup="endDrag();" >
déplacez moi !
</div>
<script type="text/javascript">
// <![CDATA[
//positionnement des divs
positionne('bloc', '10px', '100px');
// ]]>
</script>
</body>
</html>

Alors comme vous pouvez le voir, j'ai une fonction "postitionne" qui permet de placer mon bloc div au tout début. Etrangement, si je ne fixe pas ce bloc à l'aide de cette fonction, rien ne marche. En effet, si je teste sans le script de position, les attributs top et left du div ne seront pas accessibles, bien que définis dans ma css... et par conséquent je ne pourrais pas le faire bouger selon le mvnt de la souris...
La je seche, je ne comprend vraiment pas quel est le pb ... surtout que ce que je fait dans 'positionne' est refait par la suite