Rails spinoffs - Feb 2006 - Sortable + Draggable : doesn''t follow the mouse horizontally

When a ''draggable'' element is made
''sortable'', it no longer follows the
mouse horizontally when you drag it.
Is there a solution/workaround?


TIA

Alain

Yes, use the constraints options of Sortable.create

Alain Ravet wrote:
> When a ''draggable'' element is made
''sortable'', it no longer follows
> the mouse horizontally when you drag it.
> Is there a solution/workaround?
>
>
> TIA
>
> Alain
>
> _______________________________________________
> Rails-spinoffs mailing list
> Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
> http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs


_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs

Robin

     > Yes, use the constraints options of Sortable.create

When I do that (see below) the list is no longer sortable : when I drop 
an element, it goes back to its original location, and the  associated 
actin is not triggered.

(Complete view code is at the bottom of this message. I placed 2 markers 
: *** DRAGABLE and *** SORTABLE)
(Note: What I try to achieve: combine the cart demo and the sort demo.
In other works, make a list, in Rails, that''s
   1/- sortable : to ... sort the elements
   2/- dragable: to drag elements to a bin area (like in the cart demo)
   3/- dragged element follows the mouse, vertically and horizontally

   - 1/ and 2/ , work fine, but not 3/ (you can only drag them 
vertically to the bin area).
)


I followed the advice and added
     :constraint => nil

=> code is now:
     <%= sortable_element(''sortable_list'', :update =>
''lists'', :url =>
{:action => :update_positions},	
           :constraint => nil) %>

==> sort is broken:
clearing the constraint in the sortable
     - fixes the vertical constraint problem in the dragging,
BUT
     -  breaks the sort on the list: when I drop an element to its  new 
location, it doesn''t stay in this new location (goes back to its old 
location).




   :constraint => :none
       ok:1/+2/,
       not ok: 3/ (constraint still vertical)
       not ok: no more ghosting when sorting.

   :constraint => nil
       ok: 2/+3/: drag ok (no constraint, ghosting, action is triggered
       not ok : 1/ is broken (cannot sort, because element goes back to 
original location when it is dropped.)






Code:


<h1>Mes listes</h1>

<table width="60%" style="margin:0 auto;border: 1px solid
black">
	<tr>
		<td>
			<div id="lists">
				<ul id="sortable_list">
					<% for list in @lists
					all_items_done = (list.nof_open_items == list.list_items.size)
					klass = all_items_done ? "closed_list" : "open_list"
					-%>
					<li id="item_<%= list.id %>"class="one_list <%=
klass %>">

						<%= list.title %>
						<!-- 	< %= link_to h(list.title), :action =>
''show'', :id => list
%>  -->
						(<%= list.position %>)
						<small class="xsmall gray"><%= list.nof_open_items
-%>/<%=
list.list_items.size -%></small>
					</li>
*** DRAGABLE HERE ***
					<script type="text/javascript"
language="javascript">
						new Draggable("item_<%= list.id %>",{revert:true});
					</script>

					<% end %>
				</ul>

			</div>

		</td>
		<td>
			<%= link_to ''Créer'', {:action =>
''new'' }, :class => ''action_on_lists''%>
			<span class="action_on_lists_details"> une nouvelle
liste</span>

		</td></tr></table>
		<div id="wastebin">
			<%= image_tag ''poubelle.gif'' %>
		</div>
		<hr>

*** SORTABLE HERE (only the 1st one works/sorts) ***
<!-- 		< %= sortable_element ''sortable_list'', :url =>
{:action =>
:update_positions}  -%> -->
		<%= sortable_element ''sortable_list'', :url => {:action
=>
:update_positions}, :constraint => ''none''  -%>


		<%= drop_receiving_element "wastebin",
		:update => "items",
		:url => { :action => "remove_list" },
		:accept => "one_list",
		:hoverclass => "wastebin-active",
		:before => "Element.hide(element)",
		:loading => "Element.show(''spinner'')",
		:complete => "Element.hide(''spinner'')" %>


		<div style="height:40px;padding-top:10px;">
			<p id="indicator"
style="display:none;margin-top:0px;">
				<%= image_tag "spinner.gif" %> Updating cart...
			</p>
		</div>