Jquery Problème de confinement par glisser-déposer - Problème CSS?

Question

J'ai réussi à créer 2 DIV, et au moment de l'exécution, je remplis la 1ère DIV avec tout un tas d'objets, tous avec la classe .drag. La 2ème DIV a la classe .drop, et attend que l'utilisateur glisse et dépose quelques objets dedans. Le problème est, chaque fois que j'essaie de faire glisser un objet en dehors de la 1ère DIV, une barre de défilement apparaît et je ne peux pas sembler faire glisser en dehors de la DIV parent de l'endroit où un objet a été créé! Une chose que j'ai notée, c'est que si je me débarrasse des barres de défilement dans mon fichier ASPX ci-dessous, je peux glisser librement, mais alors une colonne géante descend la page et semble terrible.

Mise à jour - assez sûr que c'est un problème CSS, mais je ne sais pas où je vais mal avec mes trucs CSS existants.

Vous pouvez voir ce qui se passe sur mon site de développement: http://www.mobiuspc.com Cliquez sur un bouton du tout puis essayez de faire glisser en dehors de la DIV parent, vous verrez ce que je veux dire!

Voici mes informations ASPX pertinentes:

<asp:Panel ID="toolboxpanel" runat="server" cssclass="toolbox" ScrollBars="Auto"> 
the toolbox is here 
</asp:Panel> 

<asp:Panel ID="droppanel" runat="server" CssClass="drop" > 
the drop area is here</asp:Panel> 

</div> 

Et le CSS j'ai appliqué à lui:

.drag 
{ 
width: 125px; 
height:94px; 
padding:3px; 
margin-bottom:35px; 
float: left; 
} 
.toolbox 
{ 
position:absolute; 
height:700px; 
width:324px; 
border-style:solid; 
border-width:2px; 
border-color:Black; 
} 
.drop 
{ 
height:700px; 
width:700px; 
border-style:solid; 
border-width:2px; 
border-color:Black; 
margin-left:324px; 
} 

Et le JQuery dans le cas où il aide:

$('.drag').draggable({ revert: true, helper: 'clone' }); 
$('.drop').droppable({ 
    tolerance: "touch", // Here should be a string 
    drop: function(ev, ui) { 

     var poo = $(ui.draggable).attr("id"); 
     $('[id$="myHidden"]').val(poo); 
     __doPostBack('<%= HiddenButton.UniqueID %>', ''); 

    } 
}); 

Answer 1

En jouant avec votre page dans Firebug, en changeant ce qui suit m'a permis de glisser-déposer:

.toolbox 
{ 
/*position:absolute;*/ 
height:700px; 
width:324px; 
border-style:solid; 
border-width:2px; 
border-color:Black; 
} 
.drop 
{ 
height:700px; 
width:700px; 
border-style:solid; 
border-width:2px; 
border-color:Black; 
/* the following updated or added */ 
margin-left:328px; 
position:absolute; 
top:132px; 
} 

Position Retrait: absolute déplacé votre élément div.drop ci-dessous votre div.toolbox, qui peut être Bizarre dont vous parliez de la réponse de Dave. Tout ce que j'ai mis à jour dans le fichier css pour .drop est juste de repositionner le div.

Answer 2

I ne voyez pas de classe 'drag' dans votre css ou votre template. Vouliez-vous configurer votre draggable sur .drag, ou sur .toolbox?

La seule autre chose qui ressort du code de travail que j'ai est la "position: absolute".