Member Avatar for roryt

if you sign up for a personalized home on google a few small module items will display on the page. You can then move these around by drag and drop. I wondered if anyone knows how to do this? I would be very greatful for any responses.

Thanks

  • 2 Contributors
  • 2 Replies
  • 122 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by roryt

Dani AI

Generated

As described, that Google-style page is just a set of small panels the user can reorder in the browser and then persist. pointed you toward a client-side approach; here is a focused, practical plan plus a tiny example you can apply immediately.

A minimal DOM pattern (one column shown) — each widget has a stable id and a visible handle:

<div id="columns">
  <div class="module" data-id="weather">
    <div class="handle">Weather</div>
    <div class="body">...</div>
  </div>

  <div class="module" data-id="news">
    <div class="handle">News</div>
    <div class="body">...</div>
  </div>
</div>

Keep the drag logic separate from saving. Capture the final order and send it to your server (or use localStorage as a quick fallback). Example saver (call this from your drag-end handler):

function saveLayout() {
  const ids = [...document.querySelectorAll('#columns .module')].map(el => el.dataset.id);
  fetch('/saveLayout', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({order: ids})
  });
}

let _saveTimer;
function scheduleSave() {
  clearTimeout(_saveTimer);
  _saveTimer = setTimeout(saveLayout, 300);
}

Practical tips and gotchas:

  • Use a library if you need cross-browser touch support and keyboard reordering (native drag can be awkward on touch). Libraries also give easy "onEnd" hooks to call scheduleSave().
  • Make handles keyboard accessible and add ARIA roles so screen readers follow changes.
  • Debounce saves to avoid spamming the server. For persistence across devices, save server-side tied to authenticated user; for anonymous users, localStorage works.
  • Common failures: CSS z-index or pointer-events, nested anchors intercepting pointer events, and forgetting to serialize the right data-id values. Server-side: validate the incoming order and guard against tampering.

This gives a small, robust template to build on: modular markup, a single save routine, and attention to accessibility and mobile.

Recommended Answers

All 2 Replies

Member Avatar for pty

Google's interactive page was made using a technology called AJAX.

If you google for AJAX tutorials you'll find lots, there have been numerous ones on digg too.

I'm not reccomending any here because it depends on what technologies you're using (.net/php/ruby on rails/python etc)

Member Avatar for roryt

Thanks very much for that I shall have a look at that, cheers

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.