jQuery Forum

I was looking at the draggable demo and I needed something like that
so I started making my own version, but I need a horizontal list not a
vertical one so I added a "float:left" to the LI style and now it is
not dropping on my sortable list. Can someone please offer a
suggestion. I am new to jQuery so please excuse my ignorance. :-)
Remove the float:left in the styles below and this works; with it in
it doesn't work. My goal is to have horizontal list where I can drag
and drop from one list to another.
Here is my test code for this prototype.
My Styles:
.mytest ul { list-style-type: none; margin: 0; padding: 0; margin-
bottom: 10px; }
.mytest li { margin: 3px 3px 3px 0; padding: 1px; float:left; width:
100px; height: 95px; font-size: 4em; }
My Script code:
$(function(){
    $("#sortable").sortable({
        revert: true,
        opacity: 0.70,
        tolerance: 'pointer'
    });
    $("#draggable").draggable({
        connectToSortable: '#sortable',
        helper: 'clone',
        revert: true
    })
    $("ul, li").disableSelection();
});
Not sure if my HTML will be escaped, but here are my unordered lists
<ul>
    <li class="ui-state-highlight" id="draggable">A</li>
</ul>
<ul id="sortable">
    <li class="ui-state-default">1</li>
    <li class="ui-state-default">2</li>
    <li class="ui-state-default">3</li>
    <li class="ui-state-default">4</li>
    <li class="ui-state-default">5</li>
</ul>
If my HTML is escaped, here is my escaped version of my lists.
&gt;ul&lt;
    &gt;li class="ui-state-highlight" id="draggable"&lt;A&gt;/li&lt;
&gt;/ul&lt;
&gt;ul id="sortable"&lt;
    &gt;li class="ui-state-default"&lt;1&gt;/li&lt;
    &gt;li class="ui-state-default"&lt;2&gt;/li&lt;
    &gt;li class="ui-state-default"&lt;3&gt;/li&lt;
    &gt;li class="ui-state-default"&lt;4&gt;/li&lt;
    &gt;li class="ui-state-default"&lt;5&gt;/li&lt;
&gt;/ul&lt;
--