using resizables and innerhtml function

using resizables and innerhtml function

Okey, i've run into some js troubles creating a page using draggables, droppables and resizables. Hope someone can bring some light into this dark tunnel.

The setup is like this: several draggables can be dropped onto a droppable div. As they are dropped, they are constrained within the droppable. Furthermore, they are both movable and resizable. Using a doubleclick function, it is also possible to edit the contents of a div.

I was using innerhtml of the innermost div to change text, store them, but as resizeable adds the handles [b]within[/b] my innermost div, i cant use this innerhtml function directly. I'm thinking of (temporary) destroying the resizable item, but running into trouble there with this code:

  1. function saveContent() {
  2.     var contentdiv = document.getElementById('droppable');

  4.   for (var i=0; i<contentdiv.getElementsByTagName("div").length; i++){
  5.   contentdiv.getElementsByTagName("div")[i].resizable('destroy');
  6.    }
  7. document.getElementById('hiddenhtmlfield').value = contentdiv.innerHTML; // save all at once
  8. document.getElementById('myform').submit();
  9. };

The error is "contentdiv.getElementsByTagName("div")[i].resizable is not a function" so apparently it doesnt work as simple as this. Can anyone tell me what I'm missing here?

Thanks, Mark