Drag & Drop dans une div overflow

[devlpASP]

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

[Bovino]

C'est un grand classique en programmation : il doit y avoir un problème dans le code.

[devlpASP]

dans quelle partie du code (css, html ou js) ?

[MonsieurSmith]

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

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

[Bovino]

Envoyé par MonsieurSmith

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

C'est bien ça

[devlpASP]

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>