How to add div wrapper in a existing foreach loop

Question

I have a PHP foreach loop going on, and it's looping some data coming from a database.

Inside the foreach loop I have a couple of div elements that contain each dynamic data coming from the database. Each data has an id of item1, item2, item3, etc. There's a total of 8 items in the loop. I'm trying to create a drag and drop for only item5, item6, item7, and item8. Basically only the 4 bottom I want to add this drag and drop functionality. My HTML structure currently looks something like this.

<div id="sortable_area_only" class="column>
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
  <div id="item5"></div>
  <div id="item6"></div>
  <div id="item7"></div>
  <div id="item8"></div>
</div>

I'm trying to create something like this:

  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
  <div id="item4"></div>
<div id="sortable_area_only" class="column>
  <div id="item5"></div>
  <div id="item6"></div>
  <div id="item7"></div>
  <div id="item8"></div>
</div>

Only items in the "sortable_area_only" can be sorted/drag and drop. Nothing can be dropped outside of the "sortable_area_only" div container. I've been trying to accomplish this by using JavaScript and or jQuery/jQuery UI.

This is something similar to what I have on my PHP file:

<?php
  $item = 1;

  echo('<div id="sortable_area_only" class="column">');

  foreach($value as $someValue){

   echo('<div id="item'.$item++.'">'.$someValue.'</div>');

  }

  echo('</div>');
?>

As you can see, the above foreach loop will produce something like what I mentioned in the first HTML structured.

Below is my jQuery code to drag and drop elements.

/** Add sortable/draggable function **/
    $('.column').sortable({
        connectWith: '.column',
        cursor: 'move',
        placeholder: 'placeholder',
        forcePlaceholderSize: true,
        opacity: 0.4,
        stop: function(event, ui)
        {
            // some code goes here
        }
    }).disableSelection();

I've been searching online for something similar to what I'm looking for, but I couldn't find anything. Any help would be greatly appreciated! Thank you!

Sha'an · Accepted Answer · 2021-08-07 07:55:59Z

1

You have access to item count inside your loop. So you can try something like this.

<?php
$value = [1,2,3,4,5,6,7,8]; // <= just for example ( for easy testing by copy-paste )
$item =1;
  foreach($value as $someValue){
   echo $item===5 ? '<div id="sortable_area_only" class="column>' : '';
   echo('<div id="item'.$item++.'">'.$someValue.'</div>');
   echo $item===9 ? '</div>' : '';
  }

?>

Why $item===9 ? Due to your code structure, the latest change prints 8 but adds 1 to it. So your $item value is 9 at the closing "div".

answered Aug 7, 2021 at 7:55

Sha'an

1,2862 gold badges15 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add div wrapper in a existing foreach loop

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related