Guide on crafting a scrollable and touch-responsive grid using CSS and JavaScript

Question

Guide on crafting a scrollable and touch-responsive grid using CSS and JavaScript

I am seeking guidance on creating a grid with a variable number of columns and rows. It should be contained within a separate div and should not interfere with other objects or alter the parent's size.

The grid needs to be square and I am currently utilizing Tailwind CSS, but I am open to transitioning to SCSS or plain CSS if necessary. Additionally, I would like it to be interactive, allowing users to touch and move it with a mouse on desktops and touch-enabled devices.

Could you provide suggestions on how to achieve this functionality?

javascript css laravel tailwind-css laravel-livewire

Answer 1

Answer №1

Based on the question you've presented, here is a potential approach to solving it. While I have not yet tested this solution on a touch device, adapting it to handle touch events should not pose a significant challenge.

const elements = [
  ['x0', 'x1', 'x2'],
  ['y0', 'y1', 'y2'],
  ['z0', 'z1', 'z2']
];

let htmlContent = '';
for (let rowElements of elements) {
  htmlContent += '<div class="row">';
  for (let element of rowElements) {
    htmlContent += '<div class="element">';
    htmlContent +=   element;
    htmlContent += '</div>';
  }
  htmlContent += '</div>';
}

const viewContainer = document.querySelector('#view-container');
const outputContainer = document.querySelector('#output-container');
outputContainer.innerHTML = htmlContent;



let initialMousePosition = null;
let initialOffset = null;

outputContainer.addEventListener('mousedown', event => {
  outputContainer.classList.remove('animate');
  initialMousePosition = {
    x: event.clientX,
    y: event.clientY
  };
  initialOffset = {
    x: outputContainer.offsetLeft - viewContainer.offsetLeft,
    y: outputContainer.offsetTop - viewContainer.offsetTop
  };
});

window.addEventListener('mouseup', event => {
  initialMousePosition = null;
  initialOffset = null;

  outputContainer.classList.add('animate');
  const xOffset = -1 * Math.max(0, Math.min(Math.round((outputContainer.offsetLeft - viewContainer.offsetLeft) / -100), elements.length - 1));
  const yOffset = -1 * Math.max(0, Math.min(Math.round((outputContainer.offsetTop - viewContainer.offsetTop) / -100), elements[0].length - 1));
  outputContainer.style.left = `${xOffset * 100}px`;
  outputContainer.style.top = `${yOffset * 100}px`;  
});

window.addEventListener('mousemove', event => {
  if (initialMousePosition) {
    const xMovement = initialMousePosition.x - event.clientX;
    const yMovement = initialMousePosition.y - event.clientY;
    outputContainer.style.left = `${-1 * xMovement + initialOffset.x}px`;
    outputContainer.style.top = `${-1 * yMovement + initialOffset.y}px`;
  }
});

#view-container {
  width: 100px;
  height: 100px;
  overflow: hidden;
  
  border: 2px solid blue;
}

#output-container {
  position: relative;
}

.row {
  display: flex;  
}

.element {
  display: flex;
  min-width: 100px;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}

#output-container.animate {
  transition: left 1s ease 0s, top 1s ease 0s;
}

Drag the content within the box!<br/>
<br/>
<div id="view-container">
  <div id="output-container"></div>
</div>

Answer 2

Based on the question you've presented, here is a potential approach to solving it. While I have not yet tested this solution on a touch device, adapting it to handle touch events should not pose a significant challenge.

const elements = [
  ['x0', 'x1', 'x2'],
  ['y0', 'y1', 'y2'],
  ['z0', 'z1', 'z2']
];

let htmlContent = '';
for (let rowElements of elements) {
  htmlContent += '<div class="row">';
  for (let element of rowElements) {
    htmlContent += '<div class="element">';
    htmlContent +=   element;
    htmlContent += '</div>';
  }
  htmlContent += '</div>';
}

const viewContainer = document.querySelector('#view-container');
const outputContainer = document.querySelector('#output-container');
outputContainer.innerHTML = htmlContent;



let initialMousePosition = null;
let initialOffset = null;

outputContainer.addEventListener('mousedown', event => {
  outputContainer.classList.remove('animate');
  initialMousePosition = {
    x: event.clientX,
    y: event.clientY
  };
  initialOffset = {
    x: outputContainer.offsetLeft - viewContainer.offsetLeft,
    y: outputContainer.offsetTop - viewContainer.offsetTop
  };
});

window.addEventListener('mouseup', event => {
  initialMousePosition = null;
  initialOffset = null;

  outputContainer.classList.add('animate');
  const xOffset = -1 * Math.max(0, Math.min(Math.round((outputContainer.offsetLeft - viewContainer.offsetLeft) / -100), elements.length - 1));
  const yOffset = -1 * Math.max(0, Math.min(Math.round((outputContainer.offsetTop - viewContainer.offsetTop) / -100), elements[0].length - 1));
  outputContainer.style.left = `${xOffset * 100}px`;
  outputContainer.style.top = `${yOffset * 100}px`;  
});

window.addEventListener('mousemove', event => {
  if (initialMousePosition) {
    const xMovement = initialMousePosition.x - event.clientX;
    const yMovement = initialMousePosition.y - event.clientY;
    outputContainer.style.left = `${-1 * xMovement + initialOffset.x}px`;
    outputContainer.style.top = `${-1 * yMovement + initialOffset.y}px`;
  }
});

#view-container {
  width: 100px;
  height: 100px;
  overflow: hidden;
  
  border: 2px solid blue;
}

#output-container {
  position: relative;
}

.row {
  display: flex;  
}

.element {
  display: flex;
  min-width: 100px;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  
  justify-content: center;
  align-items: center;
  border: 1px solid red;
}

#output-container.animate {
  transition: left 1s ease 0s, top 1s ease 0s;
}

Drag the content within the box!<br/>
<br/>
<div id="view-container">
  <div id="output-container"></div>
</div>

Guide on crafting a scrollable and touch-responsive grid using CSS and JavaScript

Answer №1

Similar questions

Alignment of Bootstrap responsiveness shifted to the left rather than the center

Adjust the DIV shape to fit perfectly within the browser window without overlapping with any other elements

JavaScript regex for the 'hh:mm tt' time format

What is the best way to create a sticky/fixed navbar that conceals the div above it while scrolling on the page?

MongoDB table collections (table names in other databases)

Vue alert: Issue encountered in watcher 'childItems' callback - 'TypeError: Unable to access property 'tag' as it is undefined'

Display information from dynamically generated pages using Gatsby JS sourcing data from CSV files

Sending a document through an ajax request from a bootstrap dialogue box

Is QA supported by LG WebOS 3.5 through webdriver?

Obtain the Present Controller Identity within AngularJS

Choosing a CSS selector for a class that does not have a specific ID

Using Laravel Eloquent to establish relationships through pivot tables

Position the Mui Card Action at the Upper Right corner

Looking to utilize AngularJS validation in place of the default browser validation?

Interactive button displaying modal for every row in b-table

What is the best way to activate an @keyframe animation based on the scrolling action?

Revamp your code by utilizing ES6 class to replace multiple if statements in Javascript

Ways to halt a script entirely once its tag has been eliminated

Utilizing model associations in Sails.js to populate an array

Implementing the fetch API with radio buttons in a React Native application