I am currently working with jQuery UI sortable portlets and PHP, and I need to be able to get the number position where each portlet is and update it when moved.
The portlet in the 1st position should always say Position 1
, and the portlet in the 2nd Position should always say Position 2
.
The trick is that I want it to update every time that I move a portlet, so that the portlet in the 1st Position is ALWAYS Position 1
and so on. This is because I am moving unique data in these portlets, and the Position value will determine what priority this information is displayed on another page.
So how do I get and display a portlets position on each portlet, and update it whenever it is moved?
<script>
$(function() {
$( ".column" ).sortable({
connectWith: ".column",
handle: ".portlet-header",
cancel: ".portlet-toggle",
placeholder: "portlet-placeholder ui-corner-all"
});
$( ".portlet" )
.addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
.find( ".portlet-header" )
.addClass( "ui-widget-header ui-corner-all" )
});
</script>
<?php
for($i = 0; $i < 6; $i++){
?>
<div class="portlet" id='portlet<?php echo $i; ?>'>
<div class="portlet-header">
<div>Position:<span id="value<?php echo $i; ?>"></span></div>
<script>
$(document).ready(function() {
var portletPosition = $('#portlet<?php echo $i; ?>').sortable("serialize");
$("#value<?php echo $i; ?>").html(portletPosition);
});
</script>
</div>
//Unique Portlet data
</div>
<?php
}
?>