Buen dia (o noche) a todos.
Estoy trabajando con la libreria de script.aculo.us para hacer una seccion de drag and drop...
Los elementos que seran "draggables" vienen de una base de datos por lo que los acomodo de la siguiente manera
Código HTML:
<div id="gposociedad">
<div id="polilla_23" class="polilla" style="top: 15px; left: 20px;">
Polilla numero 1
</div>
<div id="polilla_24" class="polilla" style="top: 15px; left: 190px;">
Polilla numero 2
</div>
<div id="polilla_26" class="polilla" style="top: 15px; left: 360px;">
Polilla numero 3
</div>
<div id="polilla_27" class="polilla" style="top: 15px; left: 530px;">
Poililla numero 4
</div>
<div id="polilla_28" class="polilla" style="top: 15px; left: 700px;">
polilla numero 5
</div>
<div id="polilla_29" class="polilla" style="top: 60px; left: 20px;">
Polilla numero 6
</div>
</div>
Como se daran cuenta, los divs polilla estan acomodados de una manera especifica.
Ahora, para crear el efecto drag and drop recurro al "sortable.create" de script.aculo.us
Código:
<script type="text/javascript">
// <![CDATA[
Sortable.create('gposociedad',{
tag:'div',
dropOnEmpty: true,
containment:["gpointegrada","gposociedad"],
constraint:false});
Sortable.create('gpointegrada',{
tag:'div',
dropOnEmpty: true,
containment:["gpointegrada", "gposociedad"],
constraint:false});
// ]]>
</script>
Cuando arrastro una polilla del grupo sociedad al grupo integrada funciona bien, perfecto, pero con el detalle que polilla se acomoda en la misma posicion en que estaba en el grupo sociedad... por lo que en el grupo "integrada" aparecen todas las polillas desagrupadas...
Lo que busco es que, al "soltar" un div polilla en la zona drappable "integrada" se acomode en la siguiente posicion disponible, y no en la posicion que trae "grabada" del grupo original "sociedad"
Saludos y espero que alguien me pueda explicar algo más profundo sobre los "sortables" de script.aculo.us ... por que ya lei el wiki al cansancio y no veo donde pueda estar la solucion.
Gracias