How to make a resizable and draggable box that's a clear window with an opaque background?

Question

I want to make a transparent box that can be dragged left/right, as well as re-sized with handles. The area to the left and right of the box should be opaque, something like this:

... i.e. you can hold the middle of the box and move it left (revealing what's currently blocked by the blue colour) , and should be able to make the transparent box bigger/smaller by dragging the red handles.

Is this possible to do with JQuery UI draggable() and resizable(), and css?

note: the purple on top and under the white box doesn't have to be there - maybe it can be done with 2 resizable purple divs and one draggable transparent div?

Answer 1

Answering my own question for future googlers - I achieved this by having a single (transparent) div that's both draggable and resizable.

To the left and right I have opaque divs (fixed to the left and right), and I'm updating their sizes in the resize and drag events.