Tengo un bucle foreach de PHP en curso, y está enlazando algunos datos provenientes de una base de datos.
Dentro del bucle foreach tengo un par de elementos div que contienen datos dinámicos provenientes de la base de datos. Cada dato tiene una identificación de elemento1, elemento2, elemento3, etc. Hay un total de 8 elementos en el bucle. Estoy tratando de crear un arrastrar y soltar solo para el elemento 5, el elemento 6, el elemento 7 y el elemento 8. Básicamente, solo los 4 inferiores quiero agregar esta funcionalidad de arrastrar y soltar. Mi estructura HTML actualmente se parece a esto.
<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>Estoy tratando de crear algo como esto:
<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>Solo los elementos en "sortable_area_only" se pueden ordenar/arrastrar y soltar. No se puede colocar nada fuera del contenedor div "sortable_area_only". He estado tratando de lograr esto usando JavaScript y/o jQuery/jQuery UI.
Esto es algo similar a lo que tengo en mi archivo PHP:
<?php $item = 1; echo('<div id="sortable_area_only" class="column">'); foreach($value as $someValue){ echo('<div id="item'.$item++.'">'.$someValue.'</div>'); } echo('</div>'); ?>Como puede ver, el ciclo foreach anterior producirá algo como lo que mencioné en el primer HTML estructurado.
A continuación se muestra mi código jQuery para arrastrar y soltar elementos.
/** 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();He estado buscando en línea algo similar a lo que estoy buscando, pero no pude encontrar nada. ¡Cualquier ayuda sería muy apreciada! ¡Gracias!
Tiene acceso al recuento de elementos dentro de su ciclo. Así que puedes probar algo como esto.
<?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>' : ''; } ?>¿Por qué $elemento===9? Debido a la estructura de su código, el último cambio imprime 8 pero le agrega 1. Entonces, su valor de $ artículo es 9 en el "div" de cierre.