How can I absolutely position jQuery draggables and still make them move correctly for droppable to work? (a problem just with IE)

Question

Hello,

I've read lots of articles and tried everything I can think of, but I can't manage all three: position a draggable object, make it move correctly and get the droppable object to recognize it. When I change the code, I manage every time to do one or two of them, but never all of them together, and I need them all.

Here is some code:

In the .aspx:

<table id="tblAll" border="1" style="margin:0; padding:0;">
        <tr dir="ltr" id="trAreas">
            <td id="tdAreas" colspan="2"><asp:Xml ID="xmlAreas" runat="server" /></td>
        </tr>
        <tr id="trMain">
            <td id="tdButtons" style="width:75px;">
                <div id="droppable">
                    <asp:Image ID="imgTrash" ImageUrl="~/Images/Trash.png" runat="server" />
                </div>
            </td>
            <td id="tdMain" runat="server">
                <asp:Panel ID="divMain" Width="700px" Height="400px" runat="server" CssClass="MainBackground"></asp:Panel>
                <asp:Xml ID="xmlAreaTables" runat="server" />  
            </td>
        </tr>
</table>

In the xsl file, where I bring the elementes from the DB and postion them on the page:

<xsl:for-each select="Tables/Table">
      <div class="test" id="divTable_{@ObjectID}" style="position: absolute; top:{@RowID}px; right:{@ColID}px;">
        <img id="img_{@ObjectID}" src="{@ImageURL}"/>
      </div>
    <input type="hidden" id="hidTypeID_{@ObjectID}" value="{@ObjectTypeID}" />
  </xsl:for-each>

And last the .js file:

$(document).ready(function() {
    $(".test").draggable({});
    $("#droppable").droppable({
        drop: function(event, ui) 
              {
                alert("fgsdfgtd");
              }
    });      
});

I've tried also:

<xsl:for-each select="Tables/Table">
  <div class="test" style="position: absolute;">
    <div class="test1" id="divTable_{@ObjectID}" style="top:{@RowID}px; right:{@ColID}px;">
      <img id="img_{@ObjectID}" src="{@ImageURL}"/>
      <input type="hidden" id="hidTypeID_{@ObjectID}" value="{@ObjectTypeID}" />
    </div>
  </div>
</xsl:for-each>

And that is the closest one yet, but that is putting all the elements in one place in the top right corner of the main div, from there i can do any thing i want, but the problem is that they are not positioned in the original places and that is a huge problem (i did alert on the style for each one and they still getting the right position but not showing in the right place)...

I've tried many versions of div and where to put the style="position: absolute;" and the position of the elements. I need to bring them from the DB and position them dynamically on the page and I need them to drag freely (not just up an down one the same line) and to be recognized when being dropped to the trash. What am i doing wrong?

Answer 1

Solved the problem....

Again, dir="rtl" was the problem....IE8 doesn't like RTL too much i guess, i had (and probably will have) lots of problems with that....:-)