Rails spinoffs - Jul 2005 - fix for scriptaculous dragdrop.js empty list problem

Hi Thomas,

Here''s a fix for the problem that I raised this morning, turned out to
be fairly
simple in the end (after many false starts and thrashing about - thank goodness
for Venkman!)

First, in Sortable.create(), I register the parent element (the UL tag or
whatever), and add an extra property to it to mark it as the parent of the list
in question:

    for (var i = 0; i < elements.length; i++){
      //register children as droppables, as before...
    }
    element.isParentDroppable=true;
    Droppables.add(element, options_for_droppable);
    options.droppables.push(element);

Then under options_for_droppable.onHover, I test for that property:

      onHover: function(element, dropon, overlap) {
        if (dropon.isParentDroppable){
          dropon.appendChild(element);
          if (dropon.sortable){
            dropon.sortable.onChange(element);
          }
        }else{
          //do what onHover used to do...
        }
      }
    }

That way, when an element is dropped onto the background of a list - populated
or
unpopulated, it will be appended to the end of the list. The containing UL
element or whatever needs to be styled to have a fixed height of some sort, I
think, or it will shrink down to almost nothing when the list is emptied. I
tried
it with a list element with no height styling and a 1px border, and it was
possible to drag back into that after it was empty, but it presents a very thin
target. Either a border, padding or fixed height is needed, by the looks of it.

I''m using two side-by-side columns, so I''ve set height to 100%
of the enclosing
element. Dragging onto the list ''background'' works whether the
list is empty or
not, and the effects  kick in nicely, animating it upwards until it hits the top
of the empty container or the lowest list item.

It works with DIV tags too, just override with tag:div when creating the
Sortables.

Sample bit of html to support it:

<td class=''sortlist'' width=''270''
valign=''top''>
<h3 class=''sortHeaderRow''>Unselected</h3>
<div id=''firstCell''
style=''height:100%''>
 <ul id="firstlist" style=''border:solid red 1px;
height:100%''>
   <li class=''sortListRow''
id="firstlist_firstlist1">Item 1 from first list.</li>
   <li class=''sortListRow''
id="firstlist_firstlist2">Item 2 from first list.</li>
 </ul>
</div>
</td>

<td id=''secondCell'' class=''sortlist''
width=''270'' valign=''top''>
<h3 class=''sortHeaderRow''>Selected</h3>
<div id=''firstCell''
style=''height:100%''>
 <ul id="secondlist" style=''border:solid green 1px;
height:100%''>
   <li class=''sortListRow''
id="secondlist_secondlist1">Item 1 from second list.</li>
   <li class=''sortListRow''
id="secondlist_secondlist2">Item 2 from second list.</li>
   <li class=''sortListRow''
id="secondlist_secondlist3">Item 3 from second list.</li>
   <li class=''sortListRow''
id="secondlist_secondlist4">Item 4 from second list.</li>
   <li class=''sortListRow''
id="secondlist_secondlist5">Item 5 from second list.</li>
   <li class=''sortListRow''
id="secondlist_secondlist6">Item 6 from second list.</li>
 </ul>
</div>
</td>

and script tag:

window.onload=function(){
 
Sortable.create("firstlist",{containment:["firstlist","secondlist","firstCell","secondCell"]});
 
Sortable.create("secondlist",{containment:["firstlist","secondlist","firstCell","secondCell"]});
}

Note that I''ve added a marker DIV around each UL, and referenced it in
the
''containment'' array. I''m not sure how necessary this
is, but it''s working right
now, so I''m going to leave it alone for the day :-)

In terms of usability, it makes quite a good difference for the user. 

What''s your preference for fix submission? Should I mail you the
modified .js
file off-list?

Regards,

Dave
Author, ''Ajax in Action''
http://dave.sunwheeltech.com/wordpress



On Mon Jul 18 12:06 , Thomas Fuchs <thomas@fesch.at> sent:
>Please do! Others have hit this limitation before and it would be  
>very nice to have this in!
>
>Thomas
>
>Am 18.07.2005 um 13:20 schrieb dave crane:
>
>> I set up two lists so that I can drag items between them, then if  
>> either list
>> becomes empty, I can''t drag elements back into it.
>>
>> I''ll have a hck at it - in the meantime, if anyone has
experience
>> with solving
>> this issue, I''d be grateful to hear from you.
>--
>This email has been verified as Virus free
>Virus Protection and more available at http://www.plus.net

dave crane wrote:
> Hi Thomas,
> 
> Here''s a fix for the problem that I raised this morning, turned
out to be fairly
> simple in the end (after many false starts and thrashing about - thank
goodness
> for Venkman!)
Hi Dave,

Thanks for coming up with the solution, as it''s just what I''ve
been
wanting to do. However, my feeble attempts to implement your suggested 
fix end up with either totally broken code (no dragging whatsoever), or 
the droppable UL doesn''t accept LIs when it is empty. I''m
guessing that
I''m placing the code into the wrong place or perhaps I need to make a 
couple of small changes.

Do you have a link to a page that contains this solution that you''re 
talking about so that others can see exactly what you''ve done?

Danilo