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

**WalidNat** · 16/10/2006, 23h22

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.

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);
}

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

**lalouve** · 17/10/2006, 02h30

Il faudrait un peu plus de code...

**guy777** · 17/10/2006, 08h27

au lieu de background-color essaye backgroundColor

Voici un code de drag 'n drop

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 !

**WalidNat** · 18/10/2006, 12h56

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

<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

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

JavaScript

Discussions similaires

Partager

Partager