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=.


Reply via email to