Drag and drop nested forms demo

Additional plugin – jQuery UI sortable

Nice example of complex behavior implemented in 70 lines code. Each page is instantiated in a single $.my call with less than 1K of code. jQuery UI draggable plugin gives our ad modules mobility between pages. See it in action – just drag marks to shuffle items inside and between pages.

This example can be extended fairly easy with more complex behavior like outputting all the ads stats in real time – we just need to wrap pages around with $.my instance, which will track all the changes.

Retrieving pages' states is trivial – for page 1 you just need to call $("#page1").my("data").

Add spread

Only javascript is shown below – all html templates and css are defined in the page's body. It's 70+ lines of code – putting them to javascript source will make it messy. Its possible however as described in Table demo.

Click to show code. Please note every time you see xd, read it as аd. I made this to prevent demo from being cut off by аd-blockers.

Page {n} advertisers