如何通过 jQuery UI 使整个 DOM 可拖动和调整大小？

Question

Is there a way to "activate" an entire DOM to be draggable and resizable using jQuery UI? I then want to save the user's new positions in HTML5's data attribute to recreate the page later.

Imagine this same page you're looking at to be "activated" when you just hover, click, drag, and resize all the visible elements around (snapping would be super nice.)? Any advice or idea on this?

Answer 1

Making literally every div/span as drag and droppable is non-sensable. What we has humans easily observe as a atomic "unit" (like the 'javascript' tag box) is not so obvious internally in the HTML structure. So you may have to do some thinking and decide what you want included in "everything" that becomes Drag and droppable. And at that point, you can just name all those elements with a "dd" class and use that.

Answer 2

Like Thr4wn said, if you give each element that should move a class, then you can give each member of that class a function that updates its location when it changes. I suggest using 960.gs as a grid to remember locations.

This way you can each objects classes as html5 data.

Answer 3

It's pretty simple, just do this:

$('*').draggable();

Not really sure why you would want to do this.

Answer 4

if you really want to you could use the $("*") selector. but I would not suggest it...