获取jQuery UI排序后的ID数组

Get array of IDs after jQuery UI Sortable

本文关键字：ID 数组 排序 jQuery UI 获取      更新时间：2023-09-26

我使用的是jQuery UI可拖动和可排序的函数，我是这方面的新手。左边是项目列表（从数据库生成），右边是用户可以拖放的框。删除时/删除后，用户可以对它们进行排序。

以下是完整预览：http://jsbin.com/oBeXiko/3

问题：排序后，如何获取每个框中元素的ID数组？

我尝试过.sortable（"toArray"）和sortable（"serialize"），但都返回空字符串。

简单HTML

<div id="raspored">  
      <div class="left">
        <ul id="kanta">Delete</ul>    
        <ul id="lista_predmeta" class="droptrue">
          <li class="predmet ui-state-default" predmet-id="id_1">Item_1</li>
          <li class="predmet ui-state-default" predmet-id="id_2">Item_2</li>
          <li class="predmet ui-state-default" predmet-id="id_3">Item_3</li>
          <li class="predmet ui-state-default" predmet-id="id_4">Item_4</li>
        </ul>
      </div>
      <div class="right">     
        <ul class="raspored" razred="1">I</ul>  
        <ul class="raspored" razred="2">II</ul>  
        <ul class="raspored" razred="3">III</ul>  
        <ul class="raspored" razred="4">IV</ul>  
      </div>  
  </div>

我的jQuery函数

$(document).ready(function() {
     var url = "";
     var raz = 0;
    $( ".raspored" ).sortable({
        cursor: 'move',
        opacity: 0.65,
        stop: function ( event, ui){
            var data = $(this).sortable('toArray');
            console.log(data); // This should print array of IDs, but returns empty string/array
       }
    });
    $(".raspored").droppable({
         accept: ".predmet",   
         drop: function(event, ui){
            ui.draggable.removeClass("predmet");
            ui.draggable.addClass("cas");
            raz = $(this).attr("razred");
         }
    });

    $(".predmet").draggable({
        connectToSortable:".raspored",
        helper: "clone",
        revert: "invalid",
        stop: function(event, ui){
                var predmet = $(this).attr("predmet-id") ;
                console.log( "PredmetID = " + predmet + " | RazredID = " + raz);
        }
    });
    $("#kanta").droppable({
        accept: ".cas",
        drop: function(event, ui){
            ui.draggable.remove();
        }
    });
    $( ".raspored, .predmet, .cas, #kanta, #lista_predmeta" ).disableSelection();
  });

调用toArray时，可以传递带有attribute字段的选项对象。此attribute字段定义toArray调用中使用的属性。例如：

var data = $(this).sortable('toArray', { attribute: 'predmet-id' });

这将为您提供一个项目的predmet-id属性数组。请参阅toArray文档。

请注意，默认的attribute是id，这就是为什么您的数组之前返回了空字符串——您的元素都没有id属性！

使用适合我的序列化。下面是可能对您有所帮助的示例代码。

<ul id="sortable">
<li id="ID_11" class="ui-state-default">sai</li>
<li id="ID_21" class="ui-state-default">2</li>
<li id="ID_3" class="ui-state-default">3</li>
<li id="ID_4" class="ui-state-default">4</li>
<li id="ID_5" class="ui-state-default">5</li>
<li id="ID_6" class="ui-state-default">6</li>
<li id="ID_7" class="ui-state-default">7</li>
<li id="ID_8" class="ui-state-default">8</li>
<li id="ID_9" class="ui-state-default">9</li>
<li id="ID_10" class="ui-state-default">10</li>
<li id="ID_11" class="ui-state-default">11</li>
<li id="ID_12"  class="ui-state-default">12</li>
</ul>
 <a href="javascript:void(0);" onClick="saveDisplayChanges();">Save</a>
 <span id="categorysavemessage"></span>

Javascript代码是：

<script>
   $(function() {
   $( "#sortable" ).sortable();
});
function saveDisplayChanges()
{
  var order =  $("ul#sortable").sortable("serialize");
  var a = "hello";
  var b = "hi";
  $.post("update_displayorder.php?"+order+"&a=hello"+"&b=developer",{abc:a,xyz:b},function(theResponse){
  $("#categorysavemessage").html(theResponse);
});
}
</script>

用于获取带有其他信息的订单数据的Php脚本update_displayorder.php脚本为：

<?php
echo "<pre>";
print_r($_REQUEST); 
$newOrder = $_POST['ID'];
$counter = 1;
foreach ($newOrder as $recordIDValue) {
   echo $counter .' '. $recordIDValue .'<br/>';
   $counter ++;
}
?>
相关文章：