issue w helper

in one of my partials, I was using the following code (made it
short..)

<ul id="list_works" class="works" style="height:248px; overflow:
scroll;">
  <% for work in @works %>
      <li id="work_<%= work.id -%>" ><p><%= work.title -%> </p></li>
  <%= draggable_element "work_#{work.id}", :revert => true %>
  <% end %>
</ul>

due to an issue with the overflow:scroll + drag/drop , I need to
change the helper for a more complicated script, and I don't see how
to set the id of the <li> , something like "work_<%= work.id -%>" or
"work_#{work.id}"
the script is the following : where xxx should be the work.id

<script type="text/javascript">
  if(navigator.userAgent.indexOf("MSIE") != -1) {
  document.getElementById("list_works").style.position = "relative"; //
needed so that draggables scroll
    new Draggable('work_xxxx', { revert: true, ghosting: false,
    onStart: function()
{ document.getElementById("list_works").style.position = "static"; },
    onEnd: function()
{ document.getElementById("list_works").style.position = "relative"; }
   });
  }
  else { new Draggable('work_xxx', { revert: true, ghosting:
true }); };
</script>

btw this script runs well, and help drag an item from a
overflow:scroll container above all other areas....
just need to load <script src="http://www.google.com/jsapi"></script>
before prototype and scriptaculous....

thanks for any clue .....