Make a web page element draggable and resizable with jQuery

I wanted to give my web page users (language learners) the ability to flexibly move items around their screen. This could be for drag/drop learning activities, but the main purpose is flexible screen layout. I want learners to be able to move around text, video, audio, instructions, etc to best suit their screen size and what they are focussed on. This video shows how that can be achieved on a web page using the jQuery javascript framework.