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!
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".