Moving the contents inside squares in a particular order

JavaScript
22

Thanks for these modifications. It looks like your code is ignoring the order based on the number calculated and is always filling from bottom to up (starting from H1). Paul’s code works fine and starts based on the calculated number.

23

To be fair I was mainly focused on the form and event handling, and didn’t look at the logic above it. I will have another look.

24

@Jack_Tauson_Sr, I missed that Paul’s event listener was still in the code at line 43

const myButton = document.querySelector("#move-text");
myButton.addEventListener(
  "click",
  () => {
    fill();
  },
  {
    once: true
  }
);

So that was firing as well as mine and passing in the default value of 1. I have removed that and it appears to be functioning as before, but now with validation. I have updated the codepen.

2 Likes
25

Not at all :slight_smile: I’m glad you chimed in :wink:

That looks much neater.

1 Like
26

Hello everyone,

I’m testing another variation in the Paul’s code (I haven’t yet taken rpg_digital’s changes into account yet) where I’ve a Show Options button and a dropdown which generates the blue boxes with text on the left.

The issue I’m facing is:

The Move Text Content! button works fine for the first time (let’s say I select Option One from the dropdown and press Show Options button and then calculate the cell value and press Move Text Content! button)

. However, when I select the OptionTwo from the dropdown calculate the new cell number, and hit the Move Text Content! button, it doesn’t work as shown in this JSFiddle

I think one problem I might need to address is that once the blue text box contents are moved on the grid, the HTML part sitting over there contains the following with data-id="0" , data-id="1" and data-id="2". So the next set of blue text boxes generated after selecting something other than Option One from the dropdown, needs to make sure that data-id starts from the next number, right?

This might not be associated with what I’m facing but wanted to check with you all if there’s anything wrong I’m doing with my dropdown approach?

<div class="item ui-droppable">
        <div class="content moved"><span class="words" data-id="0">OptionOne#0</span></div>
        <!-- must have no spaces inside .content -->
      </div>
      <div class="item ui-droppable">
        <div class="content moved"><span class="words" data-id="1">OptionOne#1</span></div>
      </div>
      <div class="item ui-droppable">
        <div class="content moved"><span class="words" data-id="2">OptionOne#2</span></div>
</div>

P.S.

I don’t have a validation in place yet where I will need to make sure that the cell value is unique always or else the text could start overlapping once the above issue starts working.

Thanks!

27

In my demo I only allowed the event listener to run once as there was only one set of data t work with.

If you remove the once setting.

,
    {
      once: true,
    }

Then the routine will work on your second data.

Of course you will need to do all the checking and stop things being added to the same cells etc…

It would be a good time to change to the version by @rpg_digital before you add too many parts as his version is more robust than mine and coded much better :slight_smile:

28

It’s working fine. I had to comment out once:true from the listner as shown here

Need to address this issue though.

29

If I remember correctly the data-ids were only in place so that you could match the dragged content back to its original position. The span is dragged out of its parent but then you can always match the span back to the parent by using its id. However you aren’t doing any of that as it seems you are just doing a one way process.

However, you obviously have to keep a track of what’s been put where so that you don’t overlap content so it may be that you should keep using the data-id but increment it each time you produce more and in that way you can stop when the grid is full.

30

Yes, that’s how it has been progressing so far unless something changes later on.

Yeah, planning to keep unique data id as I might need for upcoming few changes:

  1. Introduce the functionality to drag the content from one grid to another empty grid.

  2. Save all the grid information in a database so I might need to store the ids.

1 Like
31

I was thinking about what data-id value I should consider using and I am heading towards adding the cell value that comes out using the Calculate button. The reason I am thinking of using this value is that if I save all the information in a database table along with the text and cell value and want to retrieve all the values and fill up the grid values later on (by having some user interface), it might make more sense to have the cell value in there instead of starting them from 0 or 1 or 2, etc. What do you think?

32

Yes if you want to remember where they were you will need something to reference.

If you need to say put items back into the original left column then you’d also need the data-I I’d that is currently there.

It all depends on how this evolves and what you need to keep track of. :slight_smile:

33

Thanks for your input. I will consider keeping data-id as cell value and will increment it based on how many elements I’m planning on moving to the grid.

Most likely I won’t be needing this scenario of sending text on the grid back to the blue text boxes.

I am expecting something like the following:

  1. I currently have the whole grid displayed inside a tab on my user interface. So user can go to this page by clicking a tab(I call it Grid tab in my UI) and then move their stuff on the grid. I will have a Save button some where on the screen such that once they are done moving, they can hit save and be done with their changes.

  2. Again, if user go to the page by clicking Grid tab, they will see an empty grid and can do their stuff of moving text on the grid. Hit save and be done with it.

I am thinking of having another tab - maybe call it Gallery or History, where I can list all of these saved grids (from step 1 and step 2) and display them as a thumbnail. Once user sees which previous version of saved grid they would like to edit, they can click on the thumbnail and open the previously saved grid in an edit mode and can add more text on the grid in addition to what was already there. I think this is where saving calculated cell value fordata-id will help.

1 Like
35

Hey @PaulOB and others,

I have a question on the validation that doesn’t seem to be working for me. I’ve modified the following event listener as shown below to validate the following scenarios:

  1. If user tries to use cell value which already exists, then display an error. I’ve a separate code where this scenario is working (not shown below) for me but I’m more concerned about what I’m doing wrong with the second scenario below.

  2. This is a scenario if I already have - for example something on square A1, A2 and A3. And user selects B1 as starting point and has 7 values to move. So based on the pattern, B1 to B6 will fill properly and B7 is going to overlap with the already existing value on A1.

I was expecting that the way I was approaching it below should stop this but it doesn’t seems to be working.

myButton.addEventListener("click", () => {
        /* To Validate:
        Case #1: If the cell value for starting square already exists
        then, you cannot fill it. Show an alert. 
        
        Case #2: Check for all the values that are about to be moved on to
        the squares. If any of these overlap with already existing value of the grid
        then you cannot fill it. Show an alert
        */

        /* Get all values that need to be tested 
       */

        var childDivs = document
            .getElementById("phrase")
            .querySelectorAll("div:has(> span[data-id])");

        console.log(childDivs);

        // get the calculated value of the cell number
        let testValue = document.querySelector("#cellnum").innerHTML;

        console.log("Test Value");
        console.log(testValue);
        let integerValue = parseInt(testValue);

        // create an array of values to be tested.
        const valueArray = [];
        for (i = 0; i < childDivs.length; i++) {
            valueArray.push(integerValue + i);
        }



        for (j = 0; j < valueArray.length; j++) {
            var getDivWithValue = document
                .getElementById("drop-em")
                .querySelectorAll('div:has(> span[data-id="' + valueArray[j] + '"])');



            if (getDivWithValue.length > 0) {
                console.log("A value already exists for cell value " + valueArray[j]);

                alert("Starting Square or other Square needed to complete the move are already in use.Please use different Starting Cell Value");
                return;
            }
        }


        fill();
    },

    );

Here’s my JSFiddle showing the same.

36

Maybe a “set” object or two could be used.
A set for the occupied cells. As cells are filled they could be included into the occupied cells object.
When another selection is made and you need to determine wether or not there are needed cells already occupied; include them into a new set object and see if any of the cells in this new object are in the used cells object.
I’m not familiar enough with the js set object to actually give you sample code but feel that it would be a cleaner approach to your problem.

37

Thanks. Good idea. I am going to try this “set” based approach. That way I won’t have to use Array just like I have been using.

38

By the way, I am just curious to know why did you prefer “Set” based approach over Array based which I am currently using.

39

I found sets very useful back when I was programming in Modula2. And so I’m very comfortable using sets.
But it involves less code and the set object is responsible for the comparing.

40

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.