Question

我想构建一个动态图像库工具，并使用jquery-ui可排序技术对它们进行拖放操作。

我想按类别对它们进行分组。首先，我动态构建列表并构建连接的可排序<ul>。当我拖放图像时，序列化的id会被触发。我的AJAX调用向我的PHP发送了2个帖子，每个组都有id个新的数组。但我的问题是我需要group-id，我把图像放到哪里。仅我的查询就没有足够的ID。例如：

＆＃13;

$(document).ready(function(){
    $("#sortable0, #sortable1, #sortable2").sortable({
        connectWith: ".connectedSortable",
        placeholder: "ui-state-highlight",
        opacity: 0.6, 
        update: function() {
            var order = $(this).sortable("serialize", {key:"id"});		      
                $.ajax({
                    type: "POST",
                    data: {order: order},                       
                    url: '/backend/ajax/sort_sc_img.php'	
                });			
            }
        });
    $("#sortable").disableSelection();
});

＆＃13;

<div>
  <ul id ="sortable0" class="connectedSortable">
    <li id="1">
      <img src="image01.jpg">
    </li>
    <li id="2">
      <img src="image02.jpg">
    </li>
  </ul>
  
  <ul id ="sortable1" class="connectedSortable">
    <li id="1">
      <img src="image03.jpg">
    </li>
    <li id="2">
      <img src="image04.jpg">
    </li>
  </ul>
  
  <ul id ="sortable2" class="connectedSortable">
    <li id="1">
      <img src="image05.jpg">
    </li>
    <li id="2">
      <img src="image06.jpg">
    </li>
  </ul>
</div>

＆＃13;

Answer 1

jQueryUI update function API显示该函数使用2个参数update和ui进行回调。 ui对象具有sender属性，即：

如果从一个可排序的移动到另一个
，该项目的可排序性

因此，通过添加这些参数，您可以访问父<ul>，例如：

$("#sortable0, #sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    placeholder: "ui-state-highlight",
    opacity: 0.6,
    update: function (event, ui) {
        var order = $(this).sortable("serialize", {
            key: "id"
        });

        var group = ui.sender === null ? null : ui.sender[0].id; // get the parent <ul> id
        console.log('group', group, 'order', order); // just log for this demo
    }
});

另请注意，serialize仅在属性值与预定义格式匹配时才有效，默认情况下为"setname_number"，因此列表项应为id，如<li id="foo_1"> 。如果您不想使用默认值，jQueryUI API允许您为格式指定不同的属性和正则表达式。

修改

在jQueryUI receive函数中添加一个钩子，允许我们在删除项目时抓取接收目标组的id。

receive: function(event, ui) { var group = event.target.id; console.log('receiving group', group); // do something with the group }

Updated demo

jQueryUI可排序的目标元素ID

1 个答案: