Drag & Drop dans une div overflow

Version imprimable

10/08/2011, 17h57
devlpASP

Drag & Drop dans une div overflow

Bonjour,

je suis confronté à un problème.

Je fais un drag & drop d'un objet. Cet objet peut être "droppé" dans deux div possibles dont une comportant un overflow scroll. Ces deux div sont collées.

Lorsque je droppe mon objet dans le div overflow scroll il n'y a pas de problème.
Le problème réside dans le fait que lorsque je "drop" mon objet dans l'autre div, il me le "drop" en realité dans la div overflow scroll dans la zone non visible de cette div.

En esperant que vous ayez compris mon problème, je vous remercie d'avance
10/08/2011, 18h00
Bovino

C'est un grand classique en programmation : il doit y avoir un problème dans le code. ;)
11/08/2011, 09h16
devlpASP

dans quelle partie du code (css, html ou js) ?
11/08/2011, 16h03
MonsieurSmith

Je pense qu'il y a un message caché dans la réponse de Bovino :

Citation:

Envoyé par Bovino

il doit y avoir un problème dans le code. ;)

L'ennui est que sans pouvoir lire ledit code, il nous est impossible de nous pencher plus précisément sur ton problème... Voilà, tu sais ce qu'il te reste à faire ;)
11/08/2011, 16h17
Bovino

Citation:

Envoyé par MonsieurSmith

Je pense qu'il y a un message caché dans la réponse de Bovino

C'est bien ça :)

Desolé, voila pour le code

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
39
40
 
$(".PanelPere,.treeviewPere").droppable({
        activeClass: 'ui-state-hover',
        accept: ".newObject , .newTemplate, .treeview",
        tolerance : "pointer",
 
        drop: function (event, ui) {
            var objet_drag = $(ui.draggable).attr('id'); // ID de l'élément drag 
            panelOver = document.getElementById(this.id);
       }
});
 
-----------------
 
<div ID="Panel1" class="scrollClass"  Height="768px" style="float:left;position:relative;border-top:1px solid;border-bottom:1px solid;" Width="1024px">
 
        <div id="MainContent_Scroll_1" class="scrollClass" style="height:768px;width:1024px;position:absolute;opacity:1;overflow-x:auto;overflow-y:hidden;">
	       <div id="MainContent_View_2" class="PanelPere" style="height:768px;width:1024px;position:absolute;opacity:1;">
 
        ...
 
	        <div id="MainContent_View_6" class="PanelPere" style="height:768px;width:1024px;position:absolute;opacity:1;">
 
        ...
 
</div>
 
---------------
 
 
<asp:Panel ID="Panel5" runat="server" Width="230px" Height="768px" style="padding:0px 10px;overflow:auto;margin-bottom:20px" visible="true">
                    <asp:TreeView ID="TreeView1" runat="server">
 
                    ...
 
                    (Code generée automatiquement)
                    <div id='Button_6' class='treeview' >Button_6</div>
 
                    </asp:TreeView>
                </asp:Panel>