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

Hi,

I''ve just been having a look at the scriptaculous drag-n-drop library,
which
looks exceedingly good. I''m running across a show-stopper here, though
-
something that''s cropping up in both the online demos and my own test
scripts. If
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.

Looking under the hood in dragdrop.js, the Sortable class appears to set the
LI elements as drop targets, so that when an element drops onto them, they work
out
how to add it as a sibling (I''m looking at
options_for_droppable:onHover here,
lines 46-80 ish). The behaviour that I''m seeing makes sense from this
code - no
LI elements left in the list, so nothing happens. However, from the
user''s
perspective, it''s
going to be pretty frustrating, allowing the app to get into a dead-end state
from
which it can''t recover.

I can see the droppables array being assembled in lines 504-5. Presumably if I
add the UL as a droppable too, it would pick up the onHover call too when
dropped over?

OK, I''m done thinking aloud for now...

I didn''t see any mention of this bug on the http://script.aculo.us bugs
page, and
this mailing list is pointed to as the place to go for bugs etc. Anyone else
come
across this problem, and got an ingenious fix that could save me some coding
time? I''m happy to hack up a crude fix myself, and let you see how it
goes, but
I''m aware that there are probably subtleties that I haven''t
grasped yet e.g. I
shouldn''t be testing explicitly for LI and UL tags, because the tag
types can
be overridden in the options array (line 427).

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.

Cheers,

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

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.

Hi,

As a workaround, I am using an invisible third list that has a "(This
list is empty)" element. This element will appear whenever one of two
real lists becomes empty, so as to preserve the usual drag-drop
behavior. It disappears once the list is no longer empty. If the
"empty" element is dragged away, it will be restored to its position.

It works with the current version of the scripts, requiring a bit more
js code. This might not be exactly what people would require, but I
just thought of sharing it as an alternative workaround in case some
people find it useful.

The full code that works is appended. (should work in a single html
file with the correct references)

Regards,
Hongping


<script src="prototype.js"
type="text/javascript"></script>
<script src="effects.js"
type="text/javascript"></script>
<script src="dragdrop.js"
type="text/javascript"></script>
<script src="controls.js"
type="text/javascript"></script>

<h3>List 1</h3>
<ul id="list1">
	<li id="1_1">List 1 Item 1</li>
	<li id="1_2">List 1 Item 2</li>

</ul>
<h3>List 2</h3>
<ul id="list2">
	<li id="2_1">List 2 Item 1</li>
	<li id="2_2">List 2 Item 2</li>
</ul>

<ul id="fake" style="display:none">
	<li id="empty">(This list is empty)</li>
</ul>

<script type="text/javascript" language="javascript">
	function create_lists(){
		Sortable.create("list1",
{containment:["list1","list2","fake"],onUpdate:update_lists});
		Sortable.create("list2",
{containment:["list1","list2","fake"]});
		Sortable.create("fake",
{containment:["list1","list2","fake"]});
	}
	function is_empty(l){
		return l.getElementsByTagName("li").length == 0;
	}
	function check_not_empty(list){
		l = $(list);
		if (!is_empty(l)){
			a = $(''empty'');
			if (a.parentNode == l){
				l.removeChild(a);
				l.sortable.onChange(a);
				$(''fake'').appendChild(a);
			}
		}
	}
	function check_empty(list){
		l = $(list);
		if (is_empty(l)){
			a = $(''empty'');
			l.appendChild(a);
			a.parentNode.sortable.onChange(a);
		}
	}
	function update_lists(){
		check_not_empty(''list1'');
		check_not_empty(''list2'');
		check_empty(''list1'');
		check_empty(''list2'');
	}

	create_lists();
	update_lists();
</script>