Hi Guys,
I''m trying to get a set of boxes(div elements) to drag and drop to
different columns. The view is below, along with css code. I''ve been
messing with this all day but can''t get it to work. I can drag the
element and I see the highlight change when I''m hovering, but the box
does not stick... it always reverts. I tried various ways of doing it
but nothing seems to work. Any help would be SUPER greatly
appreciated, thanks!!!
##CSS CODE###
/* Les trois colonnes */
.colonne {width:32%; vertical-align:top; float:left; padding-top:10px;
padding-left:5px; padding-right:5px;}
/* Widget */
.widget {border: 1px solid #79A7E2; padding-top:0px;padding-bottom:
0px;margin-top:0px; margin-bottom:15px}
/* Header d''un widget */
.widget .title {width:100%;padding-top:0px;padding-bottom:0px;margin:
0em;font-size:100%;}
.widget .header {cursor:move;}
.header a { color:navy }
.header table {width:100%;padding:0px;margin:0px;font-size:82%;}
table .lefttitle {color:#77c;width:90%;background-
color:#e5ecf9;padding-left:2px;font-weight:bold;padding-right:5px;font-
size:122%;}
table .lefttitle a {text-decoration: none;}
table .righttitle {color:#77c;width:10%;background-color:#e5ecf9;white-
space:nowrap;text-align:right;padding-right:2px;}
/* Div d''edition */
.edit {border: 1px solid #79A7E2; padding-top:0px;padding-bottom:
0px;margin-top:0px; margin-bottom:10px; background-color:#e5ecf9;}
/* Contenu d''un widget */
.widget .content {margin:5px;}
/* */
.dragover {border:1px solid red;}
.hover { background-color: #888888; }
##########VIEW##########
<%= javascript_include_tag :defaults %>
<div id="widgets">
<div id="left" class="colonne">
<div id="fernando1" class="widget">
<div class="header">
<table cellspacing="0"
cellpadding="0"><tr>
<td class="lefttitle"><font
size="+1"><a href="#"
onclick="new Effect.toggle(''content1'',
''appear'', {duration:
0.5});return false;">Title1</a></font></td>
<td class="righttitle"><a
href="#" onclick="new
Effect.toggle(''edit1'', ''appear'', {duration:
0.5});return false;">edit</
a></td>
</tr></table>
</div>
<div id="edit1" class="edit"
style="display:none">
<form><table width="100%">
<tr><td colspan="2">Truc <input
type="text"
size="5"> Machin <input type="text"
size="5"></td></tr>
<tr><td><select><option>un</option><option>deux</
option><option>trois</option></select></td>
<td align="right"><input
type="button" value="ok" /></td></tr>
</table></form>
</div>
<div id="content1" class="content">
Content1
</div>
</div>
<div id="fernando2" class="widget">
<div class="header">
<table cellspacing="0"
cellpadding="0"><tr>
<td class="lefttitle"><font
size="+1"><a href="#"
onclick="new Effect.toggle(''content2'',
''appear'', {duration:
0.5});return false;">Titre 2</a></font></td>
<td class="righttitle"><a
href="#" onclick="new
Effect.toggle(''edit2'', ''appear'', {duration:
0.5});return false;">edit</
a></td>
</tr></table>
</div>
<div id="edit2" class="edit"
style="display:none">
<form><table width="100%">
<tr><td colspan="2">Truc <input
type="text"
size="5"> Machin <input type="text"
size="5"></td></tr>
<tr><td><select><option>un</option><option>deux</
option><option>trois</option></select></td>
<td align="right"><input
type="button" value="ok" /></td></tr>
</table></form>
</div>
<div id="content2" class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec nibh. Nulla placerat consectetuer lacus. Aenean vulputate,
nunc at vestibulum aliquam, nisl metus convallis arcu, sed ornare
ligula velit eu dolor. Aliquam nec nisi aliquam risus consectetuer
placerat. Praesent eget pede.
</div>
</div>
</div>
<div id="middle" class="colonne">
<div id="fernando3" class="widget">
<div class="header">
<table cellspacing="0"
cellpadding="0"><tr>
<td class="lefttitle"><font
size="+1"><a href="#"
onclick="new Effect.toggle(''content3'',
''appear'', {duration:
0.5});return false;">Titre 3</a></font></td>
<td class="righttitle"><a
href="#" onclick="new
Effect.toggle(''edit3'', ''appear'', {duration:
0.5});return false;">edit</
a></td>
</tr></table>
</div>
<div id="edit3" class="edit"
style="display:none">
<form><table width="100%">
<tr><td colspan="2">Truc <input
type="text"
size="5"> Machin <input type="text"
size="5"></td></tr>
<tr><td><select><option>un</option><option>deux</
option><option>trois</option></select></td>
<td align="right"><input
type="button" value="ok" /></td></tr>
</table></form>
</div>
<div id="content3" class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec nibh. Nulla placerat consectetuer lacus. Aenean vulputate,
nunc at vestibulum aliquam, nisl metus convallis arcu, sed ornare
ligula velit eu dolor. Aliquam nec nisi aliquam risus consectetuer
placerat. Praesent eget pede.
</div>
</div>
</div>
<div id="right" class="colonne">
<div id="fernando4" class="widget">
<div class="header">
<table cellspacing="0"
cellpadding="0"><tr>
<td class="lefttitle"><font
size="+1"><a href="#"
onclick="new Effect.toggle(''content4'',
''appear'', {duration:
0.5});return false;">Titre 4</a></font></td>
<td class="righttitle"><a
href="#" onclick="new
Effect.toggle(''edit4'', ''appear'', {duration:
0.5});return false;">edit</
a></td>
</tr></table>
</div>
<div id="edit4" class="edit"
style="display:none">
<form><table width="100%">
<tr><td colspan="2">Truc <input
type="text"
size="5"> Machin <input type="text"
size="5"></td></tr>
<tr><td><select><option>un</option><option>deux</
option><option>trois</option></select></td>
<td align="right"><input
type="button" value="ok" /></td></tr>
</table></form>
</div>
<div id="content4" class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Donec nibh. Nulla placerat consectetuer lacus. Aenean vulputate,
nunc at vestibulum aliquam, nisl metus convallis arcu, sed ornare
ligula velit eu dolor. Aliquam nec nisi aliquam risus consectetuer
placerat. Praesent eget pede.
</div>
</div>
</div>
</div>
<%= draggable_element(''fernando1'', :ghosting=>true,
:revert=>true)%>
<%= draggable_element(''fernando2'', :ghosting=>true,
:revert=>true)%>
<%= draggable_element(''fernando3'', :ghosting=>true,
:revert=>true)%>
<%= draggable_element(''fernando4'', :ghosting=>true,
:revert=>true)%>
<%= drop_receiving_element(''left'',
:accept => ''widget'',
:hoverclass => ''hover'',
:url => {:action=>:todo_completed})%>
<%= drop_receiving_element(''right'',
:accept => ''widget'',
:hoverclass => ''hover'',
:url => {:action=>:todo_completed})%>
<%= drop_receiving_element(''middle'',
:accept => ''widget'',
:hoverclass => ''hover'',
:url => {:action=>:todo_completed})%>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Spinoffs" group.
To post to this group, send email to
rubyonrails-spinoffs-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-spinoffs-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---