[jquery-ui] Re: Draggable & Sortable Problem/Bug?

#sortable { height: 95px; }

---

The unordered list parent element needs to have a bigger layout to be
able to correctly calculate the drag/drop collision for your
interaction. When the child elements all float, the container height
collapses to nothing.



On Nov 20, 2:33 pm, JoeyG <[email protected]> wrote:
> 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;

--

You received this message because you are subscribed to the Google Groups 
"jQuery UI" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/jquery-ui?hl=.