Problem with Sortables in Scriptaculous

Question

I'm having a problem with getting my divs to become sortable using Scriptaculous's Drag and Drop Library.

<pre id="leftcol">
<div id="id0"><h3>Date and Time</h3><div class="moduleContent"></div></div>
<div id="id14"><h3>Calculator</h3><div class="moduleContent"></div></div>
</pre>

<script type="text/javascript">
Sortable.create("leftcol", {tag:$$('div'), treeTag:$$('pre')});
</script>

When I try to debug with Safari's Web Inspector, I get the following error: TypeError: Result of expression 'tagName.toUpperCase' [undefined] is not a function. dragdrop.js:932

Is the problem in the dragdrop.js file or is it in my code, and if it's in my code, how can I fix it? Thanks.

Answer 1

The Sortable.create method expects that the options tag and tagTree are simply two strings, not a set of DOM elements:

Sortable.create("leftcol", {tag:'div', treeTag:'pre'});

Try it out here.