如何获取可排序的portlet位置并在移动时更新它?

时间:2015-07-10 18:37:48

标签: php jquery jquery-ui portlet jquery-ui-sortable

我目前正在使用jQuery UI可排序的portlet和PHP,我需要能够获取每个portlet所在的数字位置并在移动时更新它。

第一个位置的portlet应该总是说Position 1,而第二个位置的portlet应该总是说Position 2

技巧是我希望每次移动portlet时都更新它,以便第一个位置的portlet总是Position 1,依此类推。这是因为我在这些portlet中移动唯一数据,而Position值将确定此信息在另一个页面上显示的优先级。

那么如何在每个portlet上获取并显示portlet位置,并在移动时更新它?

<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
}
?>

0 个答案:

没有答案