Can someone tell my why my drag and drop doesn't work here?

theogb · November 19, 2007, 12:59am

I’m attmepting to follow the Agile Web D. book but frankly the
AJAX section is pretty awful. When it comes to the drag and drop bit why
doesn’t it tell you what the actions in the controller should be? I’ve
checked script.aculo.us and that’s not helped either. Can someone help?
Here is my code:

#arrange.rhtml

Main Column	Side Column
<%= render :partial => 'main_col_items' %>	<%= render :partial => 'side_col_items' %>

<%= drop_receiving_element(‘main_col_items’,
:accept => ‘side_col_item’,
:complete => “$(‘spinner’).hide();”,
:before => “$(‘spinner’).show();”,
:hoverclass => ‘hover’,
:with => “‘artic=’ +
encodeURIComponent(element.id.split(‘_’).last())'”,
:url => {:action=>:main_col })%>

<%= drop_receiving_element(‘side_col_items’,
:accept => ‘main_col_item’,
:complete => “$(‘spinner’).hide();”,
:before => “$(‘spinner’).show();”,
:hoverclass => ‘hover’,
:with => “‘artic=’ +
encodeURIComponent(element.id.split(‘_’).last())'”,
:url => {:action=>:side_col} )%>

#---------------------------------

_main_col_items.rhtml

<% @issue.articles.each do |article| %>
<% if article.column == ‘main’ %>
<% ma_id = “art_#{article.id}” %>

<%= article.title %>

<%= draggable_element(ma_id, :ghosting=>true, :revert=>true) %>
<% end %>
<% end %>

#---------------------------------

_side_col_items.rhtml

<% @issue.articles.each do |article| %>
<% if article.column != ‘main’ %>
<% si_id = “art_#{article.id}” %>

<%= article.title %>

<%= draggable_element(si_id, :ghosting=>true, :revert=>true) %>
<% end %>
<% end %>

#---------------------------------

issue_controller.rb

def arrange
@issue = Issue.find(params[:id])

end

def main_col
article = Article.update(params[:artic], :column => “main”)
end

def side_col
article = Article.update(params[:artic], :column => “side”)

end

My problem is that nothing seems to occure for those actions, main_col
and side_col. Is params[:artic] not right? Surely this value will hold
the id from the element being dragged?

Any help would be much appreciated.

Cheers
Theo

theogb · November 19, 2007, 5:24am

You need to give the accept attribute as same as the class of the
draggable element.
Try it, it will work.

On Nov 19, 2007 5:29 AM, Theo Graham-brown

theogb · November 19, 2007, 8:44am

arpit jain wrote:

You need to give the accept attribute as same as the class of the
draggable element.
Try it, it will work.

On Nov 19, 2007 5:29 AM, Theo Graham-brown

It still doesn’t. I’ve now changed the code so they’re both UL lists but
there’s nothing.

What happens is that I can drag them over but they snap back as soon as
I let them go. No database update occurs. Also, my Spinner element in
the layout isn’t being unhidden and then rehidden at all.

I just tried doing
http://wiki.rubyonrails.org/wiki/pages/HowToUseDragAndDropSorting

for a list of articles and while I can drag them around and re-sort them
I can see the database was never actually getting updated. Can anyone
work out why this isn’t working?

Does anyone have similar code they can post because right now I don’t
understand why it won’t.

Cheers

theogb · November 19, 2007, 9:25am

arpit jain wrote:

This problem is only because of the non matching on the class of
draggable element and the accept attribute of the
drop_receiving_element,

Give the class attribute to the element as:

_main_col_items.rhtml

<% @issue.articles.each do |article| %>
<% if article.column == ‘main’ %>

<% ma_id = “art_#{article.id}” %>

<%= article.title %>
<%= draggable_element(ma_id, :ghosting=>true, :revert=>true) %> <% end %> <% end %>
replace the above hashed line with and try…
<% ma_id = “art_#{article.id}” , :class => “main_col_item”%>

or place it inside a div, give its class attribute and make the div as
draggable.

On Nov 19, 2007 1:14 PM, Theo Graham-brown

But that’s what I’ve done. I test the code you suggested but as I
expected, I got an error. The hashed line is simply setting up a
variable to be used twice. The div following is my draggable element and
can be dragged. Its class is ‘main_art’ and I’ve now made sure to change
the code in the arrange.rhtml view code so that the two items accept
items of ‘side_art’ or ‘main_art’ respectively.

It’s definitely not liking it. Is there a way to debug or see what’s
happening in the actions that the drag and drop is supposed to be
performing? I’m using Aptana but I don’t understand the debug
functionality. In the rails casts it appears you can view the stuff
going on in the background on the server but I’ve not yet worked out how
to see this happening.

theogb · November 19, 2007, 9:06am

This problem is only because of the non matching on the class of
draggable element and the accept attribute of the
drop_receiving_element,

Give the class attribute to the element as:

_main_col_items.rhtml

<% @issue.articles.each do |article| %>
<% if article.column == ‘main’ %>

<% ma_id = “art_#{article.id}” %>

<%= article.title %>

<%= draggable_element(ma_id, :ghosting=>true, :revert=>true) %> <% end %> <% end %>

replace the above hashed line with and try…
<% ma_id = “art_#{article.id}” , :class => “main_col_item”%>

or place it inside a div, give its class attribute and make the div as
draggable.

On Nov 19, 2007 1:14 PM, Theo Graham-brown

theogb · November 19, 2007, 10:00am

You might refer development.log.
Previously i have faced the same problem where i was able to drag the
item but can’t drag it.
I solved it the way i told u.
Might be u r having another issue or i am not getting it correctly.

Thanks
Arpit

On Nov 19, 2007 1:55 PM, Theo Graham-brown

theogb · November 19, 2007, 10:15am

arpit jain wrote:

You might refer development.log.
Previously i have faced the same problem where i was able to drag the
item but can’t drag it.
I solved it the way i told u.
Might be u r having another issue or i am not getting it correctly.

Thanks
Arpit

On Nov 19, 2007 1:55 PM, Theo Graham-brown

Okay, thanks a lot Arpit

For what it’s worth I can now see the Sortable List I linked to earlier
working…except that the refresh totally refuses to occur after each
drag and drop so it’s good to know something’s working. I might look at
that again and see if I can adjust this one to work with it.

theogb · November 19, 2007, 8:02pm

I think you misunderstood Arpit’s suggestion above. It does not
matter what type of HTML element you use, what matters is the css
class that you use to decorate it. For example, your main_col_items
partial renders a set of HTML elements with a ‘main_art’ css class, so
your second drop_receiving_element should have :accept=>‘main_art’
rather than :accept=>‘main_col_item’. The value that you pass is the
class of the draggable item, not the name/class of the container from
which it is taken.

Also, be aware that the :revert=>true option that you’re passing to
the draggable_element call is telling the draggable element to snap
back into it’s original position whenever you drop it, so some of the
behavior you’re discussing is correct.

As for the actions… is the page being rendered by the
IssueController? If not, you need to add the :controller option into
the url hash in the drop_receiving_element call. A little named route
magic (via RESTful routes) would be better. I suspect that correcting
the css class will resolve the issue, though.

HTH,
AndyV

On Nov 19, 2:44 am, Theo Graham-brown <rails-mailing-l…@andreas-

theogb · November 20, 2007, 8:35am

AndyV wrote:

I think you misunderstood Arpit’s suggestion above. It does not
matter what type of HTML element you use, what matters is the css
class that you use to decorate it. For example, your main_col_items
partial renders a set of HTML elements with a ‘main_art’ css class, so
your second drop_receiving_element should have :accept=>‘main_art’
rather than :accept=>‘main_col_item’. The value that you pass is the
class of the draggable item, not the name/class of the container from
which it is taken.

Also, be aware that the :revert=>true option that you’re passing to
the draggable_element call is telling the draggable element to snap
back into it’s original position whenever you drop it, so some of the
behavior you’re discussing is correct.

As for the actions… is the page being rendered by the
IssueController? If not, you need to add the :controller option into
the url hash in the drop_receiving_element call. A little named route
magic (via RESTful routes) would be better. I suspect that correcting
the css class will resolve the issue, though.

HTH,
AndyV

On Nov 19, 2:44 am, Theo Graham-brown <rails-mailing-l…@andreas-

No, I got that and I made the change you’re describing above.
Additionally I changed my HTML to involve a List just in case.

I understand from the book that the snapback is supposed to make sure
that you are only allowed to drop elements into the correct list but it
seems that it won’t see the other list as correct. I’ve actually tried
putting a render for a different action into the :main_col and :side_col
actions but nothing’s being actually caused to function. It’s like the
dropping side just isn’t activating anything.

I managed to get the sortable list to function okay so it seems even
odder that this is so tricky. I’ll repost my (corrected) code now so you
can see what I mean (I’ve ditched the partials for now).

view code (arrange.rhtml):

Arrange articles for issue <%= @issue.issue_no %> (ID: <%= @issue.id %> )

Main Column	Side Column
<% @issue.articles.each do \|article\| %> <% if article.column == 'main' %> <% domid = "article_#{article.id}" %> <%= article.title %> <%= draggable_element(domid, :ghosting=>true, :revert=>true) %> <% end %> <% end %>	<% @issue.articles.each do \|article\| %> <% if article.column != 'main' %> <% domid = "article_#{article.id}" %> <%= article.title %> <%= draggable_element(domid, :ghosting=>true, :revert=>true) %> <% end %> <% end %>

<%= drop_receiving_element(‘main_col_items’,
:accept => ‘side_art’,
:complete => “$(‘spinner’).hide();”,
:before => “$(‘spinner’).show();”,
:hoverclass => ‘hover’,
:with => “‘article=’ +
encodeURIComponent(element.id.split(‘_’).last())'”,
:url => {:action=>:main_col })%>

<%= drop_receiving_element(‘side_col_items’,
:accept => ‘main_art’,
:complete => “$(‘spinner’).hide();”,
:before => “$(‘spinner’).show();”,
:hoverclass => ‘hover’,
:with => “‘article=’ +
encodeURIComponent(element.id.split(‘_’).last())'”,
:url => {:action=>:side_col} )%>

Actions from Issue Controller

def arrange
@issue = Issue.find(params[:id])
end

def main_col
article = Article.update(params[:article], :column => “main”)
end

def side_col
article = Article.update(params[:article], :column => “side”)
end

What would be good is if someone could point towards code examples that
atually use the same method as the Agile Rails book does.
Script.aculo.us uses a totally different method for their working but
because they are dragging items from a place and leaving a copy of the
original item I don’t really want to use their system. I want to sort
between two. Moreover I can’t even see an explanation of the ‘:with’
parameter to the call anywhere on their site.

Cheers
Theo

theogb · November 21, 2007, 10:56am

Theo Graham-brown wrote:

A brief followup: I was fiddling with this last night. I’ve realised
that the ‘drop_receiving_element’ simply isn’t working at all. I can see
the appropriate Javascript code being inserted into the generated HTML
but whether I include those lines or not, the behaviour of the screen is
identical, so there must be a fault somewhere in that call…or in my
version of the dragdrop.js from script.aculo.us…or maybe my computer
itself is in error?

Any ideas?