Click on the grid in JavaScript to rearrange it with a simple tap

Question

Click on the grid in JavaScript to rearrange it with a simple tap

I've hit a roadblock while working on my project, specifically with reorganizing my grid using JQuery. To better illustrate the issue, I've simplified it into a fiddle: http://jsfiddle.net/tylerbuchea/QgAqV/

$('div').bind('click', function() {
   var pitcher = $('.selected')[0];
   var catcher = this;

  if (catcher.offsetTop < pitcher.offsetTop || catcher.offsetLeft > pitcher.offsetLeft) {
    $(pitcher).before(catcher);
    console.log('before');
  } 

   else 
     if (catcher.offsetTop > pitcher.offsetTop || catcher.offsetLeft < pitcher.offsetLeft) {
       $(pitcher).after(catcher);
       console.log('after');
     }
});

The goal is to move the "selected" div to the clicked div's location, pushing all other divs down or up accordingly. While the current code accomplishes this for single moves, the problem arises when attempting multiple movements. Perhaps the use of .before and .after functions needs reconsideration?

javascript

Answer 1

Answer №1

Check out the revised code example I've provided with My Version:

$('div').bind('click', function() {
   var $currentlySelected = $('.selected'),
       $newlyClicked = $(this),
       currentlySelectedIndex = $currentlySelected.index(),
       newlyClickedIndex = $newlyClicked.index();

    if (currentlySelectedIndex > newlyClickedIndex) {
        $currentlySelected.insertBefore($newlyClicked);
        console.log('is greater, so put it after');
    } else {
        $currentlySelected.insertAfter($newlyClicked);
        console.log('is less, so put it after');
    }
});

Take a look and let me know if this aligns with your expectations. I made some alterations to the logic. Instead of comparing offsets, I utilized .index() to determine an element's position in relation to its siblings.

If the clicked element has a lower index than the currently selected element, then I move the currently selected element to be placed BEFORE the clicked element. Conversely, if the clicked element has a higher index, I move the currently selected element AFTER the clicked element.

Regarding the issue where elements were moving one by one, my hunch is that you may have been manipulating raw DOM elements instead of jQuery objects at times. Using IDs might have yielded different results. By working with jQuery objects, the functionality now operates as intended.

Please confirm if this suits your requirements!

Answer 2

Check out the revised code example I've provided with My Version:

$('div').bind('click', function() {
   var $currentlySelected = $('.selected'),
       $newlyClicked = $(this),
       currentlySelectedIndex = $currentlySelected.index(),
       newlyClickedIndex = $newlyClicked.index();

    if (currentlySelectedIndex > newlyClickedIndex) {
        $currentlySelected.insertBefore($newlyClicked);
        console.log('is greater, so put it after');
    } else {
        $currentlySelected.insertAfter($newlyClicked);
        console.log('is less, so put it after');
    }
});

Take a look and let me know if this aligns with your expectations. I made some alterations to the logic. Instead of comparing offsets, I utilized .index() to determine an element's position in relation to its siblings.

If the clicked element has a lower index than the currently selected element, then I move the currently selected element to be placed BEFORE the clicked element. Conversely, if the clicked element has a higher index, I move the currently selected element AFTER the clicked element.

Regarding the issue where elements were moving one by one, my hunch is that you may have been manipulating raw DOM elements instead of jQuery objects at times. Using IDs might have yielded different results. By working with jQuery objects, the functionality now operates as intended.

Please confirm if this suits your requirements!

Answer 3

Answer №2

It seems like you're asking about a specific scenario, so here's my take on what you might be looking for:

$('div').on('click', function() {
   var source = $('.selected')[0];
   var target = this;

  if (target.offsetTop < source.offsetTop || target.offsetLeft > source.offsetLeft) {
    $(target).after(source);
    console.log('before');
  } 

   else 
     if (target.offsetTop > source.offsetTop || target.offsetLeft < source.offsetLeft) {
        $(target).before(source);
       console.log('after');
     }
});

Best regards, Romén

Answer 4

It seems like you're asking about a specific scenario, so here's my take on what you might be looking for:

$('div').on('click', function() {
   var source = $('.selected')[0];
   var target = this;

  if (target.offsetTop < source.offsetTop || target.offsetLeft > source.offsetLeft) {
    $(target).after(source);
    console.log('before');
  } 

   else 
     if (target.offsetTop > source.offsetTop || target.offsetLeft < source.offsetLeft) {
        $(target).before(source);
       console.log('after');
     }
});

Best regards, Romén

Answer 5

Answer №3

$('div').bind('click', function() {
   var pitcher = $('.selected')[0];
   var catcher = this;

  if (catcher.offsetTop < pitcher.offsetTop || catcher.offsetLeft > pitcher.offsetLeft) {
    $(catcher).after(pitcher);
    console.log('before');
  }

   else
     if (catcher.offsetTop > pitcher.offsetTop || catcher.offsetLeft < pitcher.offsetLeft) {
        $(catcher).before(pitcher);
       console.log('after');
     }
});

You have switched around both the conditions and usage of the functions. Take a look at this resource to understand how to properly use before()/after().

The code may fail when dealing with multiple rows due to a logical flaw: you need to determine if the catcher is before/after the pitcher based on logic.

When does one tile come before another?

when it is on a higher row
OR
when it is on the same row AND positioned to the left

This exercise is meant for you to figure out the rest.

Answer 6

$('div').bind('click', function() {
   var pitcher = $('.selected')[0];
   var catcher = this;

  if (catcher.offsetTop < pitcher.offsetTop || catcher.offsetLeft > pitcher.offsetLeft) {
    $(catcher).after(pitcher);
    console.log('before');
  }

   else
     if (catcher.offsetTop > pitcher.offsetTop || catcher.offsetLeft < pitcher.offsetLeft) {
        $(catcher).before(pitcher);
       console.log('after');
     }
});

You have switched around both the conditions and usage of the functions. Take a look at this resource to understand how to properly use before()/after().

The code may fail when dealing with multiple rows due to a logical flaw: you need to determine if the catcher is before/after the pitcher based on logic.

When does one tile come before another?

when it is on a higher row
OR
when it is on the same row AND positioned to the left

This exercise is meant for you to figure out the rest.

Click on the grid in JavaScript to rearrange it with a simple tap

Answer №1

Answer №2

Answer №3

Similar questions

How can I animate a vertical line while scrolling down the page?

Tips for maintaining fixed div sizes when resizing the window while preserving aspect ratio

Is There a Sparse Array Element in JavaScript?

Angular - Utilizing Mat Paginator with Multiple Tables within a Single Component

Verify your credentials in Geoserver using ASP.NET and IIS

Using the same marker in React-Leaflet across different layers

Ways to stringify a JavaScript new date object using JSON

Is your window.location.hash malfunctioning?

What is the best way to align an image with the position of a div?

What is the best way to display the outcome of shuffling a deck of blackjack cards?

What is the best way to transform an array of different sizes into a JSON object?

Tutorial: Using Three.js to Assign a Unique Random Image to Each Side of Multiple Cubes

I have noticed that the require.js define object is mysteriously appearing in my code within gulp.js

Error message displayed: MUI Textfield does not support input of decimal values

Having trouble transferring sound files to Cloudinary API through javascript

Use React to insert a leading zero next to a number in the input field if the number is greater than 10

Tips for running two elixir tasks consecutively?

Having issues with retrieving latitude and longitude data from the Geocoding API in Node.js when using the OpenWeather API

What is the best way to execute the app functions, such as get and post, that have been defined

What is the process for adjusting the position following the modification of a table value in React?